Cara Membuat (TOC) Table Of Content Otomatis Blogger Responsif SEO Friendly

Cara Membuat (TOC) Table Of Content Otomatis

Cara Membuat (TOC) Table Of Content Otomatis di Blogger atau sering disebut tabel daftar isi di dalam postingan artikel otomatis. TOC otomatis blogger biasanya sering kita temukan di website dari WordPress, file berformat Word dan PDF.

{tocify} $title={Daftar Isi}

Apa itu (TOC) Table Of Content

Kalau dalam penjelasannya TOC Kepanjangan dari Table Of Content yaitu Daftar Isi atau membuat daftar isi di blog. Jika mengunjungi wikipedia, biasanya anda akan melihat Table Of Content dari setiap topik pada artikel yang anda baca tersebut.

Fungsi Table Of Content

Oke, saya akan sebutkan fungsi dari table of content. Sebelum anda memasang tabel daftar isi di dalam artikel, ketahui metode ini memiliki fungsi seperti pengiriman link dari inti atau link anchor text kepada konten artikel anda.

Keunggulan Memasang (TOC) Table Of Content

Tampilan blog menjadi lebih propesional, Membantu memudahkan pengunjung dalam mencari dan memahami gambaran isi konten. Selain itu, link anchor text ini akan meringankan pengunjung dalam merayapi halaman tag header h2,h3 dan h4.

Saya buat kode Table Of Content ini tanpa menggunakan jQuery, tidak juga memakai Font Awesome dan tanpa memakai Google Fonts. Untuk alasannya mungkin sebagian dari teman-teman yang sudah lama nge-blog mungkin sudah tahu.

Jika penasaran saya kasih tahu deh.. he he’. Alasannya supaya hasilnya lebih ringan, responsif dan SEO Friendly menurut saya.

Cara Membuat (TOC) Table Of Content Otomatis di Blogger

Tutorial ini sama halnya cara membuat daftar isi seperti wikipedia. Langsung aja ikuti tutorial dan langkah-langkah cara membuat TOC blog di bawah ini:

1. Langkah pertama, Login ke blog kalian melalui blogspot.com

2. Langkah kedua, Pilih “Menu Tema” kemudian klik “Edit HTML

3. Langkah ketiga, Salin kode dibawah ini, dan letakkan tepat diatas kode </head> bisa juga anda letakkan dibawah kode </body>

“Caranya : Kalian bisa mencari lewat Shortcode keyboard (CTRL > F)” {alertInfo}

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/*
* Blogspot TOC
* https://prestisius.blogspot.com/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://prestisius.blogspot.com/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>

$ads={2}

4. Langkah keempat, Cari kode script <data:post.body/> di blog anda. Kemudian silahkan ganti dengan kode script yang sudah saya buat di bawah ini !

“Caranya : Gunakan (CTRL > F)” untuk mencari kode script {alertInfo}

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

INGAT!!! Didalam “Menu Tema” – “Edit HTML” anda biasanya terdapat 2/3 kode seperti ini <data:post.body/> jadi kalian harus cari dan ubah semunya. Gunakan (CTRL > F) lagi untuk mencarinya. {alertWarning}

5. Langkah kelima, Silahkan tekan tombol “Simpan Tema” selesai. Cek progresnya !
Supaya semua bisa berjalan dengan baik, jangan lupa pada saat menulis artikel gunakan H2, H3, Heading dan Subheading nya dinyalakan dari setiap sub judul yang di bahas di artikel anda. 
Tombol (TOC) Table Of Content ini akan muncul secara otomatis, tanpa harus utak-atik kode. Saya buatkan untuk anda sesimple mungkin, super responsif dan super SEO Friendly tanpa memberatkan loading blogger. Metode ini work di semua template blogger.
Tujuannya supaya tombol TOC muncul di artikel pada saat anda melakukan posting artikel. Tombol daftar isi didalam artikel ini saya tempatkan secara otomatis di atas baris postingan artikel (sebelah kiri atas). Atau lebih tepatnya sebelah kiri di bawah judul artikel.
Metode ini saya adopsi dari tampilan tabel daftar isi otomatis yang ada di template LinkMagz buatan Mas Sugeng. Kemudian saya coba buat di Template Viomagz dan hasilnya sangat memuaskan. Karena dari bawaan template Viomagz belum terdapat tombol TOC nya. 

Penutup

Sampai disini tutorial cara membuat daftar isi di postingan blogger, cukup simple bukan? Jika ada masalah dalam penempatan kode atau tombol TOC tidak muncul, silahkan tinggalkan pesan di kolom komentar. Sampai bertemu di tutorial berikutnya !.