Cara Membuat Daftar Isi (TOC) Otomatis di Posting Blogger

gema.my.id - Membuat daftar isi otomatis di blogger tidaklah sulit, yang penting Anda tahu caranya. Jika Anda pengguna platform WordPress, tentunya akan sangat mudah dengan bantuan plugin untuk membuat daftar isi otomatis di posting blog.

Di tutorial blogspot kali ini, mari kita belajar cara membuat daftar isi otomatis layaknya di WordPress dengan menggunakan kode JavaScript dan CSS. Namun sebelum melanjutkan ke tutorial, saya akan membahas terlebih dahulu tentang apa itu Daftar Isi.

Apa itu Daftar Isi (TOC)

Manfaat Daftar Isi dari posting atau artikel blog adalah untuk memudahkan pengguna untuk melompat ke bagian artikel yang ingin dibaca, sehingga ketika pengguna mengklik isi daftar isi, pengguna akan langsung diarahkan ke bagian yang ingin mereka baca.

Cara Memasang Daftar Isi Otomatis di Blogger

Jika ingin Anda ingin di setiap posting blog otomatis terdapat Daftar isi (TOC), Anda bisa mengikuti langkah-langkah dibawah ini:

Pertama masuk ke akun Blogger, Pilih Tema > Edit HTML. Lalu salin kode CSS dan Javascript berikut dan letakkan sebelum kode </head> atau bisa juga sebelum kode </body>

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

<style media='all' type='text/css'>

.bwstoc {

 margin: 10px 0;

 background: #F0F0F0;

 border: 1px solid #ddd;

}

.bwstoc ol, .bwstoc ul {

 margin: 0 0 15px 20px;

 padding: 0;

}

.bwstoc ul {

 list-style: disc;

}

.bwstoc ol li, .bwstoc ul li {

 font-size: 95%;

 padding: 5px 10px 0 0;

 margin: 0 0 0 30px;

}

.bwstoc a {

 text-decoration: none;

}

.bwstoc a:hover {

 text-decoration: underline;

}

.bwstoc .bwstocHeader {

 font-weight: bold;

 font-size: 100%;

 position: relative;

 outline: none;

 border: none;

 padding: 5px 15px 5px 5px;

 margin: 5px 10px;

}

.bwstoc .bwstocHeader a {

 text-decoration: none;

 cursor: pointer;

}

.bwstoc .bwstocHeader a:hover {

 text-decoration: underline;

}

</style>

<!-- Blogger TOC -->

<script type='text/javascript'>

//<![CDATA[function bwstoc() { var bwstoc = i = headinglength = getheading = 0; headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length; if (headinglength > 1) {  // Only Shown If At least 2 Headings are Found for (i = 0; i < headinglength; i++) { getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;

 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");

 var bws_2 = bws_1.trim();

 var getHeadUri = bws_2.replace(/s/g, "_");

 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);

 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";

 document.getElementById("bwstoc").innerHTML += bwstoc;

 }

 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }

}

function bwstocShow() {

    var bwstocBtn = document.getElementById('bwstoc');

 var bwstocWrapID = document.getElementById('bwstocwrap');

 var bwstocLink = document.getElementById('bwstocLink');

    if (bwstocBtn.style.display === 'none') {

        bwstocBtn.style.display = 'block';

 bwstocWrapID.style.display = 'block';

 bwstocLink.innerHTML = 'Hide';

 

    } else {

        bwstocBtn.style.display = 'none';

 bwstocWrapID.style.display = 'inline-block';

 bwstocLink.innerHTML = 'Show';

    }

}

//]]>

</script>

<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>

</b:if>

Kemudian, silahkan cari kode <data:post.body/> dan ganti dengan kode dibawah ini:

<div id='post-toc'>

<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Daftar Isi [<a id='bwstocLink' onclick='bwstocShow()'>Show</a>]</div><ul id='bwstoc' style='display:none'/></div>

<data:post.body/>

<script>bwstoc();</script>

</div>

Note: Di template blogspot ada beberapa kode <data:post.body/> biasanya ada 2 atau 3. Silahkan pilih kode ke-3 atau kode tersebut terletak di halaman item.

Terakhir Simpan.

Cara Memunculkan Daftar Isi di Posting Blog

Kode javascript diatas akan otomatis membaca setiap tag heading seperti h2, h3 dan h4 yang selanjutnya akan menjadi daftar isi. Jadi Anda tidak perlu mengedit posting secara manual, seperti tutorial Membuat Tabel of Contents di Posting Blogger yang sudah saya buat sebelumnya.

Hal terpenting agar daftar isi muncul, pastikan Anda menggunakan subheading atau minor heading saat menulis artikel blog.

Nah, Itu saja tentang Cara Membuat Daftar Isi Otomatis di Posting Blogger. Jika ada yang kurang paham dan ada pertanyaan silahkan berikan komentar dibawah. Selamat mencoba, See you...