Cara Membuat TOC Automatis Lagi

Daftar Isi [Lihat]

Cara Membuat TOC Automatis Lagi

Jika Anda pengguna platform Wordpress tentunya akan sangat mudah dengan bantuan sebuah plugin untuk membuat daftar isi pada postingan artikel. Pengguna platform blogger yang tidak memiliki sebuah plugin, mari belajar cara membuat daftar isi di blogger. sebelum lanjut ke tutorialnya, saya akan bahas terlebih dahulu tentang Daftar Isi 

Apa itu Daftar Isi (TOC)

Table of Content dari postingan artikel, tujuannya adalah untuk memudahkan pengguna melompat ke bagian artikel yang ingin dibaca, sehingga ketika pengguna mengklik isi daftar isi maka pengguna akan langsung diarahkan ke bagian yang ingin mereka baca.

1. Login ke akun blogger
2. Pilih Tema => Edit HTML
3. lalu copy css dan javascript berikut ini dan letakan sebelum kode </head>atau</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>

Lalu, jadi tidak perlu menambahkan kode panggil TOC di postingan secara manual dan tidak perlu mengedit artikel lama. silahkan mencari kode <data:post.body/>

Tips — kode <data:post.body/>

di blogger ada beberapa, biasanya ada 2 atau 3. silahkan pilih kode ke 3 atau kode yang ada di halaman item.

Jika sudah ketemu, silahkan ganti dengan kode di bawah ini

<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Table of Contents [<a id='bwstocLink' onclick='bwstocShow()'>Show</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div>

Setelah itu simpan tema dan periksa hasilnya

Cara Membuat TOC di Artikel Blog Muncul

Kode javascript diatas akan secara otomatis membaca tag heading h3 dan h4 yang selanjutnya akan menjadi daftar isi. Agar daftar isi tampil, pastikan Anda menggunakan subheading atau minor heading saat menulis artikel. misalnya sebagai berikut

Penutup

Itu saja tentang  Cara Membuat Table of Content (TOC) Blogger Otomatis . Jika ada pertanyaan silahkan komentar di bawah, semoga bermanfaat.