الأثير

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

لإضافتها قم بإنشاء صفحة جديدة وقم باختيار 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 برابط مدونتك,و مبروك عليك الإضافة
آمل ان تكون الاضافة قد اعجبتكم