السلام عليكم اليوم في درس جديد لعمل صفحة الفهرس او ارشيف لمدونات بلوجر ، حيث يتم ترتيب جميع مقالاتك حسب التسمية/ القسم بشكل جميل ولتسهيل الوصول الي اي مقال بسرعة ولتركيب الصفحى تتبع الشرح التالي.
طريقة إضافة صفحة فهرس بلوجر
الطريقة ليست صعبة، ولا تحتاج الي شرح فيديو كي تركبها علي مدونتك، فقط تابع الشرح التالي:
- قم بالذهاب إلى منصة بلوجر.
- ثم اختار على الصفحات من القائمة الجانبية.
- نقوم بانشاء صفحة جديدة.
- ضع العنوان sitemap بالإنجليزية.
- اضغط على نشر الصفحة.
- ثم نقوم بإعادة تعديلها.
- اختار عرض html.
- وضع الكود التالي داخله.
- عدل الرابط في الكود برابط مدونتك.
- اخفي التعليقات من الصفحة.
- اضغط على تحديث.
وبذلك نكون انتهينا من التركيب.
كود الاضافة sitemap blogger html
<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://www.janapc.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:red;">New</em>'};
</script>
<script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}
.tabbed-toc .toc-tabs{width:20%;float:left}
.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.tabbed-toc .panel{position:relative;z-index:5}
.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}
.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}
.tabbed-toc .panel li:nth-child(even){background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}
</style>هذاا هو كود الصفحة نضعه داخل صفحة sitemap.html التي أنشائناها في المرحلة الاولى 😅
غير رابط مدونتي https://www.janapc.com برابط بمدونتك
معاينة صفحة الفهرس
صفحة الارشفة في قالب سكويز
في قالب سكويز الامر سهل جدا كل ماعليك فعله هو:
تتبع نفس الطريقة السابقة ثم استخدم هذا الكود مكان الكود السابق.
<div id="archive-page"></div>والان تم الانتهاء من تركيب الاضافة، والتعديل عليها، أعطينا رأيك في هذا الإضافة، و سلام عليكم ورحمة الله وبركاته ✋