Cara Membuat Tabel Of Content Di Blog

Jagoan Adsense

Baiklah pada kesempatan kali ini saya akan berbagi cara kepada anda tantanga cara menyusun sebuah tabel atau lebih mudah di sebut denga daftar isi.

Membuat daftar isi pada sebuah halaman woodpress sangat mudah karena hanya menggunkan plugin sedangkan pada blogger butuh tenaga ekstra.

Nah pada kali saya akan bagikan kodenya kepada anda dengan gratis tanpa harus berfikir juga bagaimana cara membuatnya.

Anda hanya perlu copy kode tersebut dan letakan pada blog anda

Pertama silahkan anda login ke akun blog anda dan masuk ke menu tema lalu pilih edit html.\

Setelah itu silahkan anda copy code di bawah ini da letaka di atas kode </head> atau bisa juga di bawah kode <head> silahkan anda pilih sesuai selera anda.

<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 selanjutanya silahkan anda cari kode <data:post.body/> silahkan anda ganti kode tersebut dengan kode di bawah ini.

<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 anda tidak hanya menemukan satiu kode jadi silahkan anda ganti secara keseluruhan yang ada dengan kode di atas.

Setelah itu silahkan anda klik save dan lihat hasilnya.

Baiklah mungkin hanya ini yang bisa saya sampaikan untuk penjelasan kali ini semoga bermanfaat dan selamat mencoba.

Jika ada pertanyaan atau kendala silahkan anda hubungi kami atau langsung di tanyakan di kolom komentar.

Baca Juga : cara menempatkan iklan di tengah artikel

Jagoan Adsense

SEO Content Writer