Skip to content Skip to sidebar Skip to footer
Home / Internet / Tutorial

Cara Membuat Table of Content (TOC) Otomatis di Postingan Blogger/Blogspot

Post a Comment
Daftar Isi [Tampilkan]


Cara Membuat Table of Content (TOC) Otomatis di Postingan Blogger – Pada artikel ini saya akan berbagi cara bagaimana membuat table of content (TOC) secara otomatis di postingan Blogger. Jika kita menggunakan Wordpress untuk membuat daftar isi dari konten di blog sangatlah mudah karena ada bantuan plugin yang bisa membuat TOC secara otomatis. Cara ini juga sering saya gunakan di beberapa blog yang saya miliki namun setelah memakai template LinkMagz ini tidak lagi menggunakan lagi karena di template yang sekarang sudah tersedia fitur Table of Content secara otomatis.

Pengertian Table Of Content (TOC)

Table of content adalah berupa daftar isi poin-poin dari konten artikel yang kita buat di Blogger atau website, yang biasanya mengikuti heading tag yang kita buat di tulisan halaman tersebut.

Jika mengklik dari salah satu daftar isi nantinya akan dibawa langsung ke bagian penjelasan yang ingin dibaca. Jadi tidak perlu harus membaca artikel dari awal sampai akhir, jika artikel yang kita buat terlalu panjang misal dengan 5000 kata tapi tanpa TOC maka akan membuat pengunjung jenuh dan bisa-bisa pindah ke blog lain yang bisa memudahkan para pengunjung. 

Seberapa Penting TOC untuk SEO ?

TOC yang kita terapkan di blogger tidak secara langsung berpengaruh pada SEO atau ranking blog kita namun TOC lebih berpengaruh terhadap pengalaman pengguna (User Experience) di dalam blog kita.

Dan User Experience saat ini merupakan salah satu faktor penilaian Google untuk menentukan peringkat website.

Halaman blog apa yang membutuhkan TOC?

Tidak semua halaman yang kita buat membutuhkan daftar isi atau table of content ini. Jika kita menulis artikel dengan hanya berupa pembahasan singkat dengan jumlah kata 300 – 500 kata dirasa tidak butuh adanya TOC.

Namun jika kita membuat konten dengan pembahasan yang lumayan panjang, contohnya mencapai lebih dari 1000 kata, maka sangat penting untuk memberi TOC di halaman tersebut. Karena, tidak semua pengunjung blog kita suka membaca artikel yang cukup panjang. Mereka biasanya lebih menyukai membaca hal yang penting saja atau yang ingin mereka sedang cari saja.

Tanpa adanya daftar isi ini maka user akan langsung keluar dari halaman blog kita karena malas untuk scroll dan membaca artikel yang mereka tidak inginkan dan membaca secara keseluruhan. Hal tersebut akan berdampak pada bounce rate blog menjadi tinggi dan membuat user experience menjadi buruk di mata Google.

Cara Membuat Table of Content (TOC) Otomatis di Postingan Blogger

Langsung saja ke pembahasan inti untuk membuat Table of Content di Blogger secara otomatis

Pertama masuk ke akun Blogger, lalu pilih menu Tema > Setelah itu klik Edit HTML

Copy semua kode di bawah ini, dan letakkan di Atas </head> atau bisa juga dibawah <body>, pilih salah satu saja

<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>
Selanjutnya tambahkan kode di bawah ini agar tidak perlu lagi menambah kode pemanggil TOC di postingan blogger, dan biar tidak perlu repot lagi edit artikel yang sudah pernah kita posting. 

Ada 2 cara dalam menampilkan TOC, yang pertama dari TOC tertutup jika ingin melihat TOC harus klik buka dan cara kedua adalah sebaliknya, sudah tampil dari awal kita buka halaman blog. Silakan dipilih sesuai selera

1. TOC Tampilan Tertutup

Cari kode <data:post.body/> kemudian 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><!-- end TOC -->

Terdapat beberapa (2 atau 3) kode <data:post.body/> di dalam HTML Tema Blogspot, jadi silahkan ganti semua. 

Biasanya yang saya gunakan hanya di salah satunya sudah bisa bekerja, jika tidak muncul di <data:post.body/> yang pertama maka ganti di kode yang kedua atau ketiga. Silakan dicoba-coba ;)

2. TOC Tampilan Terbuka

Caranya sama dengan tampilan pertama yaitu Cari kode <data:post.body/> kemudian 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()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->

Penutup

Berikut adalah Cara Membuat Table of Content (TOC) Otomatis di Postingan Blogger, yang bisa membuat dan menambah nilai tambah di halaman blog yang kita miliki, tidak hanya untuk memudahkan pengguna dalam mencari konten yang mereka inginkan, namun URL Permalinknya juga lebih SEO Friendly. 

TOC yang kita buat ini juga lebih ringan karena tidak perlu membutuhkan jQuery, tanpa Google Fonts dan tanpa font awesome, sehingga tidak membuat kecepatan loading jadi berat. Silakan diterapkan dan jangan lupa untuk share artikel ini supaya bisa bermanfaat ke banyak orang. Terimakasih. 

Post a Comment for "Cara Membuat Table of Content (TOC) Otomatis di Postingan Blogger/Blogspot "