√ Cara Membuat Table Of Content Otomatis di Postingan Blogger

Konten [Tampil]

Cara membuat table of content otomatis di postingan blogger merupakan langkah agar pokok poin pada artikel anda bisa tersampaikan.

Cara membuat daftar isi otomatis di blogspot bisa menjadi solusi utama bagi anda yang malas untuk membuat table of content secara manual sehingga menginginkan yang otomatis dengan memanfaatkan header yang berhasil anda buat.

Agar artikel yang anda buat bisa dibuatkan daftar isi otomatis atau table of content otomatis maka anda harus membuat artikel dengan heading lebih dari satu ya. Apa itu heading? heading merupakan judul dan sub judul utama artikel anda.

Cara Membuat Table Of Content Otomatis di Postingan Blogger.

Cara membuat table of content otomatis pada artikel postingan blogger akan membuat pengunjung anda senang membaca karena akan langsung dapat dialihkan ke artikel yang sebenarnya di cari oleh pengunjung tersebut.

Pengertian Table of Content di Blogger.

Pengertian table of content di blogger merupakan rangkaian kode yang dipergunakan untuk memunculkan secara otomatis daftar isi diblogger, anda dapat menaruhnya pada sebelum heading atau pada awal bacaan.

Cara Memasang Daftar Isi / TOC Otomatis di Postingan Blogger.

Cara memasang toc otomatis di artikel postingan blogger menjadi bahasan penting karena harus di atur dalam menu Tema > Edit HTML.

Setelah itu, anda dapat memasukan script dibawah ini tepat dibawah kode <body> 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>

Kemudian, anda dapat memasukan kode ini lagi untuk menggantikan kode <data:post.body/>. Ingat cara membuat table of content otomatis harus mengganti kode tersebut agar muncul ya.

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

Demikianlah cara membuat table of content otomatis di postingan blogger, apabila anda butuh bantuan dapat berkomentar ya.