Skip to content Skip to sidebar Skip to footer

Cara Membuat Daftar Isi Otomatis Muncul Di Semua Postingan Blog

Cara Membuat Daftar Isi Otomatis Muncul Di Semua Postingan Blog

Membuat daftar isi konten atau TOC (Table Of Content) merupakan hal yang juga harus di perhatikan setiap blogger, mungkin kamu menganggap hal ini tidak penting, namun Daftar isi konten atau TOC (Table Of Content) Memiliki banyak manfaat baik bagi pengunjung maupun Google.

Hal ini sudah di buktikan oleh beberapa blogger yang memasang daftar isi konten atau TOC yang memudahkan pengunjung untuk berpindah dari poin ke poin lainnya dengan klik di daftar isi atau TOC.

Selain memudahkan pengunjung untuk mengakses beberapa sub judul tanpa melakukan scroll, membuat Daftar Isi Konten atau TOC (Table of Content) juga dapat bermanfaat untuk menambah nilai kualitas sebuah artikel di mata Google.

Ketika seseorang melakukan searching sebuah informasi, google dengan otomatis menyediakan beberapa informasi dari berbagai website, terutama sebuah informasi dari sebuah website yang informasi tersebut berkaitan dengan searching tadi dan mudah di kenal dan di mengerti oleh google.

Dengan demikian, membuat Daftar Isi Konten atau TOC (Table Of Content) dapat membuat google lebih cepat mengenal sebuah informasi dari situs kita yang akan di tampilkan di SERP (Search Engine Results Page), dengan demikian, situs kamu berkesempatan untuk tampil di peringkat 1-10.

Masih sangat banyak manfaat lainnya membuat Daftar isi konten atau TOC (Table Of Content) yang tidak bisa Mimin rinci kan di artikel ini, langsung saja, berikut cara membuat Daftar Isi otomatis muncul di semua postingan blog.


Cara Membuat Daftar Isi Otomatis Muncul Di Semua Postingan Blog

Langkah 1: Masuk ke menu Tema, kemudian klik edit html, setelah tambahan kode di bawah ini di atas </head> atau kamu juga bisa meletakkan nya di bawah <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 2: Setelah itu pilih kode Script di bawah ini untuk menampilkan Daftar isi konten atau TOC secara terbuka atau tertutup, kemudian  cari kode <data:post.body/>, setelah itu ganti kode <data:post.body/> dengan salah satu kode Script di bawah.

Kode Script Daftar Isi konten/TOC Terbuka :

<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->

Kode Script Daftar Isi Konten/TOC Tertutup:

<div id='post-toc'>

<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>

<data:post.body/>

<script>bwstoc();</script>

</div><!-- end TOC -->

Biasanya di tiap-tiap Template mempunyai 3 kode <data:post.body/>, ganti kode <data:post.body/> tersebut dengan salah satu Script terbuka dan tertutup di atas, apabila pergantian kode <data:post.body/> pertama tidak muncul daftar isinya, silahkan ganti dengan kode <data:post.body/> kedua dan seterusnya sampai daftar isinya muncul.

Langkah 3: Simpan perubahan dan klik lihat blog, maka di setiap postingan blog anda sudah mempunyai daftar isi yang bisa menambah nilai SEO blog anda.

Cara membuat daftar isi otomatis muncul di postingan blog ini selesai, selamat mencoba, semoga bermanfaat, Assalamualaikum.wr.wb

Post a Comment for "Cara Membuat Daftar Isi Otomatis Muncul Di Semua Postingan Blog"