√ Cara Membuat Daftar Isi / Table of Content Secara Otomatis di Postingan Blogger

Konten [Tampil]

Cara membuat daftar isi secara otomatis di postingan blog merupakan langkah agar mempermudah dalam memahami isi bacaan dari blog yang anda buat tersebut. Tutorial cara memasang table of content otomatis di artikel postingan blogger AMP dan Non AMP dapat dilakukan tanpa harus mengisi sendiri.

Table of content adalah daftar isi dari beberapa bab dan sub bab yang telah disusun dalam sebuah artikel. Nah bagaimana Tutorial Membuat Daftar Isi Otomatis di Postingan Blogger yang seo friendly ya, tentunya hal ini akan meningkatkan pengunjung anda.

Cara Membuat Daftar Isi / Table of Content Secara Otomatis di Postingan Blogger

Pengertian Table of Content.

Pengertian table of content merupakan sebuah ringkasan dari halaman judul dan sub judul yang berhasil anda buat sehingga artikel akan mudah di cari tahu isi utama artikel yang anda buat.

Sebenarnya cara membuat table of content di blog dan wordpress tidak wajib kok, anda bisa menulis tanpa harus memasang script toc otomatis karena hanya berfungsi untuk memberitahu judul anda saja.

Cara Memasang Table of Content Otomatis di Blogger.

Cara memasang table of content / daftar isi otomatis untuk artikle blogger dan wordpress baik AMP atau Non AMP dimulai dengan membuka blogspot milik anda .

Kemudian, anda harus masuk ke menu Tema > Edit HTML. Lalu anda cari kode <body> dan pastekan kode dibawah ini ya.


<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) { 
 // 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>

Cara membuat table of content / toc otomatis blogger yang akan membuat blog anda menjadi seo friendly dilanjutkan dengan mencari kode <data:post.body/>.

Setelah itu, buat toc otomatis di blogger dilanjutkan dengan mempastekan kode dibawah ini untuk menggantikan kode diatas ya. Biasanya kode <data:post.body/> lebih dari 1 sehingga anda harus menggantikan semuanya.


<b:if cond='data:blog.metaDescription'>
  <data:blog.metaDescription/><br/><br/>
</b:if>
<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 -->

Kemudian anda dapat klik simpan untuk menyimpan tema anda yang baru ya. Agar memasang table of content otomatis blogger sukses, maka anda harus melihatnya ya.

Demikian cara membuat daftar isi / table of content secara otomatis di postingan blogger semoga anda paham ya.