Cara Membuat Daftar Isi Keren di Blogger

Cara Membuat Daftar Isi Keren di Blogger - Daftar isi atau sitemap adalah salah satu halaman yang wajib ada disebuah halaman website, yang mana halaman sitemap ini berisi link judul artikel yang sudah kita tulis diblog kita. Dengan adanya sitemap ini, tentu akan memudahkan pengunjung blog untuk mengeksplor artikel-artikel yang ada didalam blog kita.

Sebenarnya banyak sekali script yang bisa kita gunakan untuk membuat sitemap ini, salah satu sitemap yang menurut saya wajib kamu coba adalah sitemap yang akan saya bagikan kali ini. Selain lebih menarik karena menggunakan animasi keyframe, sitemap ini juga sangat responsive.

Bagi kamu yang penasaran dengan tampilan sitemap ini, kamu bisa langsung melihat demo-nya pada link yang sudah saya sediakan disini.

Cara Membuat Daftar Isi Keren di Blogger

Bagi kamu yang ingin memasang sitemap ini di blog kamu, kalian bisa mengikuti langkah-langkah sederhana dibawah ini. Untuk menambahkan sitemap ini, kamu hanya perlu membuat halaman baru kemudian tambahkan semua kode dibawah ini didalam postingan pada tab HTML (bukan compose).

<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://www.beesinu.web.id/",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>New</em>'};
</script>
<script src="https://cdn.jsdelivr.net/gh/Beesinu/Beesinu-Blog/Daftar-Isi-Keren-Beesinu.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>

Jangan lupa untuk mengganti url yang ditandai dengan alamat blog kalian.
Kemudian klik Publikasikan, selesai.

Bagaimana, sangat mudahkan? Saya rasa itu saja yang bisa saya bagikan pada kesempatan kali ini. Semoga artikel tentang Cara Membuat Daftar Isi Keren di Blogger ini bisa bermanfaat untuk kalian semua. Sampai jumpa.