إضافة قائمة بالمواضيع - فهرس مميز إلى مدونتك

في هذا المقال سأشارككم كيفية إضافة قائمة بالمواضيع - فهرس مميز إلى مدونتك وهي عبارة عن قائمة لإستعرض المواضيع مرتبة ترتيبا ابجديا وبحسب التسميات بحيث تسهل للزوار عمية البحث عن المواضيع بشكل كبير

بالطبع يمكنك القيام بذلك الامر يدويا في كل مرة ستضيف موضوع جديد الى مدونتك, لكن هذا الامر ممل جدا ويستغرق وقتا, وقد لا يكون بالمظهر الملائم لكن مع هذه الإضافة سيكون الامر تلقائية و بمظهر جذاب

معاينة الإضافة

لإضافتها قم بإنشاء صفحة جديدة وقم باختيار HTML للتحرير وقم بنسخ الكود التالي و لصقه في الصفحة

 <div class="tab-itheric" id="tab-itheric"></div>
<script>
var tabbedTOC={blogUrl:"https://yourblog.blogspot.com",containerId:"tab-itheric",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:' &ndash; <em style="color:red;">جديد</em>'};
</script>
<script src="https://raw.githack.com/MohammadQt/Itheric/master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tab-itheric{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite;text-align: right;}
.tab-itheric .loading{display:block;padding:2px 12px;color:#fff}
.tab-itheric ul,.tab-itheric ol,.tab-itheric li{margin:0;padding:0;list-style:none}
.tab-itheric .toc-tabs{width:20%;float:right}
.tab-itheric .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tab-itheric .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tab-itheric .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tab-itheric .toc-content,.tab-itheric .toc-line{width:80%;float:left;background-color:#fff;box-sizing:border-box}
.tab-itheric .toc-line{float:none;display:block;position:absolute;top:0;left:0;bottom:0}
.tab-itheric .panel{position:relative;z-index:5}
.tab-itheric .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tab-itheric .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:left}
.tab-itheric .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tab-itheric .panel li .summary img.thumbnail{float:right;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.tab-itheric .panel li{background-color:#f9f9f9;margin:0}
.tab-itheric .panel li:nth-child(even){background-color:#fff}
.tab-itheric .panel li a:hover,.tab-itheric .panel li a:focus,.tab-itheric .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tab-itheric .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 5px 0 5px;padding:2px 10px;border-radius:22px;float: right;}
.tab-itheric .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){.tab-itheric .toc-tabs,.tab-itheric .toc-content{overflow:hidden;width:auto;float:none;display:block}.tab-itheric .toc-tabs li{display:inline;float:right}.tab-itheric .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tab-itheric .toc-content{border:none}.tab-itheric .toc-line,.tab-itheric .panel li time{display:none}}
</style> 

قم بإستبال https://yourblog.blogspot.com برابط مدونتك,و مبروك عليك الإضافة
آمل ان تكون الاضافة قد اعجبتكم