Cara Membuat Daftar Isi Otomatis Muncul Di Semua Postingan Blog

Mashabibi.com - 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>



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

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>

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