Cara Membuat Table of Content blogger Otomatis (TOC) - SeriesWans

serieswans.com - Halo sobat blogger, pada kesempatan kali ini saya akan membagikan tutorial mengenai bagamaimana cara membuat table of content blogger Otomatis (TOC) SEO friendly.

Jika anda pengguna platform Wordpress, tentunya akan sangat mudah dengan bantuan plugin untuk membuat table of content atau daftar isi di postingan artikel. berbeda dengan pengguna platform blogger ini yang tidak ada pluginnya. sebelum lanjut ke tutorialnya, saya akan bahas terlebih dahulu mengenai Table of Contents.

Apa itu Table of Contents (TOC)

Table of Content atau yang biasa di bilang Daftar isi dari sebuah postingan artikel, tujuannya untuk mempermudah pengguna untuk melompat ke bagian artikel yang ingin mereka baca, jadi ketika pengguna mengklik isi dari table of content tersebut, maka pengguna akan langsung di arahkan ke bagian yang ingin mereka baca.

contohnya saja jika anda pernah mengunjungi dan membaca artikel di wikipedia, pasti anda pernah melihat table of content atau daftar isi tersebut dan mengklik salah satu bagian dari isi daftar konten teresebut, setelah itu anda akan di arakan ke bagian yang ingin anda baca. 

Cara Memasang Table Of Contents Otomatis di Blogger

• Masuk ke akun blogger
• Pilih menu Tema => Edit HTML
• kemudian copy CSS dan Javascript berikut ini dan letakan sebelum kode </head> atau </body>

<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, supaya anda tidak perlu menambahkan kode pemanggil TOC di postingan secara manual dan anda tidak perlu mengedit artikel yang sudah lama. silahakan cari kode <data:post.body/>

tips — ada beberapa kode <data:post.body/> didalam tema blogger, biasanya ada 2 atau 3. silahkan anda pilih kode yang ke 3 atau kodenya terletak pada halaman item.

• Jika sudah ketemu, silahkan ganti 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>

• Setelah itu simpan tema dan cek hasilnya

Cara Membuat TOC di artikel Blog Muncul

Kode javascript di atas akan secara otomatis membaca tag heading h3 dan h4 yang kemudian akan menjadi table of contents.agar table of contents tersebut muncul,pastikan anda menggunakan subheading atau minor heading saat menulis artikel. contohnya sebagai berikut

Akhir kata 

Demikian pembahasan kali ini mengenai Cara Membuat Table of Content blogger Otomatis (TOC). jika ada pertanyaan silahkan berkomentar di bawah ya sob, semoga bermanfaat.

Related Posts