Cara Membuat Table Of Content ( TOC ) Otomatis Di Blogger

Assalammualaikum, kali ini saya akan share ke kalian bagaimana cara membuat table of content di blogger yang bisa muncul secara otomatis. Selain itu, TOC yang akan kita buat ini bisa bebas diatur muncul pada bagian mana di artikel. Untuk lebih lengkapnya, silahkan simak tutorial ini sampai selesai.

Cara Membuat Table Of Content Otomatis Di Blogger

Apa itu Table Of Content

Table of content atau yang biasa disebut juga TOC bisa dibilang merupakan dafftar isi yang mencakup poin-poin penting di dalam sebuah artikel website kita. TOC ini sendiri dapat dibuat secara manual maupun otomatis. Biasanya table of content terdiri dari beberapa Heading (H1,H2, H3, dst) yang ada di dalam postingan yang kita buat.

Sebagai contoh adalah di website sarjanamalas ini pun saya juga menggunakan table of content yang saya letakkan secara otomatis setelah H2 ke 2.

Manfaat Table Of Content

Sama seperti daftar isi yang ada di buku, TOC akan memudahkan pengunjung website kita dalam melakukan navigasi pada artikel yang kita tulis. Para visitor akan dengan mudah mengetahui poin - poin penting yang ada di postingan kita dan langsung menuju ke bagian tersebut dengan cukup melakukan klik saja.

Ada beberapa pembaca yang malas apabila harus membaca keseluruhan artikel untuk menemukan informasi apa yang ingin mereka cari. Adanya TOC ini tentu saja akan sangat membantu mereka. Selain itu table of content juga bisa mengurangi resiko meningkatnya bounce rate website kita.

Apakah Table Of Content Penting Untuk SEO

Dampak secara langsung untuk SEO memang masih menjadi perdebatan. Namun Google sendiri melakukan indexing untuk table of content pada artikel sebuah website dan juga menampilkannya pada bagian bawah halaman pencarian.

Selain itu, seperti yang sudah dibahas sebelumnya bahwa table of content ini ajan meningkatkan user experience para pengunjung sebuah situs. Semakin besar user experience yang dimiliki sebuah web maka peluang untuk mendapatkan peringkat di mesin pencarian tentu saja akan semakin besar pula.

Cara Membuat Table Of Content Otomatis Di Blogger

Berbeda dengan Wordpress yang bisa dengan mudah membuat TOC menggunakan bantuan plugin, untuk blogger kalian harus sedikit bersusah payah karena harus memasang script secara manual. Tentu saja ini tidak berlaku untuk template blogspot yang sudah menanamkan fitur table of content.

Langkah 1

Masuk ke pengaturan tema blogger lalu pilih edit html.

Langkah 2

Copy lalu paste kode berikut ini setelah tag <body>

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/*
 * Blogspot TOC
 * https://bibit.ws/toc-di-blogspot.php
*/
.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'>
/*
 * SEO Friendly Blogspot Table Of Contents
 * https://bibit.ws/toc-di-blogspot.php
*/
//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
 if (headinglength > 1) {
 // Hanya Tampil Jika Ditemukan Minimal 2 Heading
 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 = 'Tutup';

    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'Tampil';
    }
}
//]]>
</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>

Langkah 3

Cari kode berikut ini <data:post.body/>lalu ubah menjadi seperti kode di bawah ini

<div id='post-toc'> <data:post.body/></div><!-- end TOC -->

Langkah 4

Copy kode di bawah ini lalu paste tepat diatas tag </body>

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<div class='ignielInsertAfter'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div>
<script>bwstoc();</script>
 </div>
  <script> //<![CDATA[
    // Insert Ads After Element by igniel.com
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('v b=["\\d\\g\\a\\d\\6\\8\\y\\a\\c\\6\\9\\7\\k\\j\\7\\6\\9","\\g\\6\\7\\z\\8\\6\\r\\6\\a\\7\\c\\l\\t\\B\\8\\f\\c\\c\\s\\f\\r\\6","\\x\\A\\6\\9\\t\\q\\6\\8\\6\\u\\7\\i\\9\\k\\8\\8","\\a\\6\\w\\7\\q\\d\\F\\8\\d\\a\\g","\\d\\a\\c\\6\\9\\7\\l\\6\\j\\i\\9\\6","\\C\\f\\9\\6\\a\\7\\s\\i\\H\\6"];G D(m,n){p h=o[b[1]](b[0])[0];E(h){p e=o[b[2]](m)[n-1];e[b[5]][b[4]](h,e[b[3]])}}',44,44,'||||||x65|x74|x6C|x72|x6E|_0x7de9|x73|x69|_0x4b0bx5|x61|x67|_0x4b0bx4|x6F|x66|x41|x42|_0x4b0bx2|_0x4b0bx3|document|let|x53|x6D|x4E|x79|x63|var|x78|x71|x49|x45|x75|x43|x70|ignielInsertAfter|if|x62|function|x64'.split('|'),0,{}));
    ignielInsertAfter('h2', '1');
  //]]> </script>
</b:if>

Info Perhatikan potongan kode di atas pada bagian berikut ini 👉 ignielInsertAfter('h2', '1'); maksud dari kode tersebut adalah TOC yang kita buat akan dimunculkan setelah tag heading (h2) ke-1 pada postingan blog kita. Kalian bebas melakukan modifikasi menyesuaikan dengan gaya tulisan masig-masing.

Langkah 5

Simpan pengaturan template, SELESAI!

Itulah tadi tutorial tentang bagaimana cara memnuat Table Of Content (TOC) secara otomatis di blogger. Semoga artikel ini bermanfaat!