Cara Membuat Daftar Isi Sederhana di Blogger

Pada tutorial kali ini saya akan membagikan cara membuat daftar isi sederhana di Blogger. Daftar isi di sini bukan berbentuk daftar isi dalam postingan atau table of contents (TOC), tapi daftar isi blog kamu atau yang kadang disebut juga peta situs (sitemap).

Daftar isi ini berguna untuk menampilkan semua judul postingan kamu dari awal mulai ngeblog sampai sekarang dalam 1 halaman. Jadi kamu dan orang lain akan bisa melihat semua artikel yang sudah ditulis selama ini.

Ada banyak tutorial di internet tentang cara membuat daftar isi blog yang keren. Mulai dari yang punya tampilan sangat menarik dan canggih dengan efek-efek javascript, hingga yang sangat sederhana dan responsive.

Kebetulan beberapa waktu lalu saya juga sempat mencari cara membuat daftar isi blog yang ringan dan sederhana untuk blog Oom ini. Dan akhirnya saya berhasil menemukan cara membuatnya.

Script daftar isi sangat sederhana tapi fungsional. Elemen style dan javascript dipasang langsung di postingan, jadi kamu tidak perlu utak-atik template blog untuk menggunakannya. Tentu saja, kamu juga bisa memodifikasi script ini sesuai keinginan. Yuk simak caranya!

Tutorial dan Panduan Memasang Daftar Isi di Blogger 2019

Buatlah 1 halaman baru di blog kamu. Halaman ya, bukan posting! Kemudian masuk ke menu pengeditan HTML lalu copy-paste script di bawah ini:

<style>
#w-sitemap-wrapper {font-size:16px}
#w-sitemap-wrapper li {position:relative;padding:.385em 0 .385em 4.6em;border-top:none;border-bottom:1px solid #f6f6f6}
#w-sitemap-wrapper span {position:absolute;left:0;color:#FFB74D}
#w-sitemap-wrapper a {font-weight:bold;color:#49ACE1}
#w-sitemap-loading-msg {height:100px;line-height:100px;text-align:center;font-weight:bold;letter-spacing:1px;font-size:18px;color:#bbbbbb}
</style>

<script>
(function(c,m){var h=window;var l=document;var e="w-sitemap-wrapper";var g="w-sitemap-loading-msg";var b=h.location;var n=b.protocol;var f=b.hostname;var k=0;l.write("<div id='"+e+"'><ol></ol><div id='"+g+"'>"+m+"</div></div>");var a=l.getElementById(e);var d=l.getElementById(g);var j=l.getElementById(e).getElementsByTagName("ol")[0];function i(o){var p=l.createElement("script");p.src=n+"//"+f+"/feeds/posts/summary?alt=json-in-script&callback=wijs_get_sitemap&start-index="+o+"&max-results=150";a.appendChild(p)}h.wijs_get_sitemap=function(E){var A=E.feed.entry;var u=parseInt(E.feed.openSearch$totalResults.$t);var x=A.length;var w="";for(var s=0;s<x;s++){var o=A[s];var C=o.title.$t;var p;var D=o.link;var y=D.length;for(var r=0;r<y;r++){if(D[r].rel==="alternate"){p=D[r].href;break}}var z=o.published.$t;var q=z.substring(0,4);var t=z.substring(5,7);var v=z.substring(8,10);var B=c.replace("dd",v).replace("mm",t).replace("yyyy",q);w+="<li><span>"+B+"</span><a href='"+p+"'>"+C+"</a></li>"}j.innerHTML+=w;k+=x;if(k<u){i(k+1)}else{d.parentNode.removeChild(d)}};i(1)})("dd/mm/yyyy","Loading......");
</script>

Klik tombol Save dan lihat hasilnya.

Panduan Setting Script Daftar Isi Blogger

Script di atas bisa kamu modifikasi sesuai keinginan. Kamu bisa menambahkan tulisan atau kata-kata pada bagian awal atau akhir script di atas. Yang harus diperhatikan, selama proses memasang atau mengedit script di atas JANGAN sampai membuka tab Compose karena scriptnya akan kacau dan tidak tampil sebagaimana mestinya.

Jika kamu ingin memodifikasinya, ubah pengaturan pada bagian style seperti ukuran font, jarak antar tabel, warna link, dan lain sebagainya. Selamat mencoba!

Tips: Dalam script aslinya, tanggal posting yang tertampil dalam format DD/MM/YYYY. Jika kamu ingin mengubahnya menjadi format DD/MM/YY seperti pada halaman Daftar Isi blog Oom ini, tambahkan string substr(-2) pada query YYYY. Mudahnya, langsung ganti javascript di atas menjadi seperti ini:

<script>
(function(c,m){var h=window;var l=document;var e="w-sitemap-wrapper";var g="w-sitemap-loading-msg";var b=h.location;var n=b.protocol;var f=b.hostname;var k=0;l.write("<div id='"+e+"'><ol></ol><div id='"+g+"'>"+m+"</div></div>");var a=l.getElementById(e);var d=l.getElementById(g);var j=l.getElementById(e).getElementsByTagName("ol")[0];function i(o){var p=l.createElement("script");p.src=n+"//"+f+"/feeds/posts/summary?alt=json-in-script&callback=wijs_get_sitemap&start-index="+o+"&max-results=150";a.appendChild(p)}h.wijs_get_sitemap=function(E){var A=E.feed.entry;var u=parseInt(E.feed.openSearch$totalResults.$t);var x=A.length;var w="";for(var s=0;s<x;s++){var o=A[s];var C=o.title.$t;var p;var D=o.link;var y=D.length;for(var r=0;r<y;r++){if(D[r].rel==="alternate"){p=D[r].href;break}}var z=o.published.$t;var q=z.substring(0,4);var t=z.substring(5,7);var v=z.substring(8,10);var B=c.replace("dd",v).replace("mm",t).replace("yy",q.substr(-2));w+="<li><span>"+B+"</span><a href='"+p+"'>"+C+"</a></li>"}j.innerHTML+=w;k+=x;if(k<u){i(k+1)}else{d.parentNode.removeChild(d)}};i(1)})("dd/mm/yy","Loading......");
</script>

Catatan: script daftar isi ini tidak valid HTML5. JIka kamu tipe orang yang perfeksionis dan valid HTML5 di semua halamannya, sebaiknya lupakan memakai daftar isi model seperti ini 😄