Cara Membuat Tabel Of Content (TOC) Otomatis Responsive

Membuat Tabel TOC Otomatis di Postingan Blogger - Kebanyakan blogger menulis artikel panjang, alasannya semakin banyak kata yang ditulis maka semakin dilirik oleh mesin pencari.

Perlu kalian ketahui sebagian besar pengujung pada mesin pencari akan cenderung langsung membaca ke poin utama dari artikel.

Untuk memudahkan para pengunjung langsung menuju ke poin utama dari artikel, saya menyarankan kalian untuk membuat tabel of content atau daftar isi artikel.

Apa itu (TOC) Tabel Of Content?

TOC (Tabel Of Content) adalah daftar isi sebuah artikel, biasanya terletak sebelum atau sesudah paragraf pertama dari artikel.

Tabel of Content hanya menujukan heading (h2, h3 dan h4) dari postingan atau artikel tersebut, kata lain hanya menujukan poin penting dari isi artikel.

Apabila kalian mengunjungi Wikipedia maka akan melihat tabel of content ini dari setiap artikel yang kalian baca.

Fungsi (TOC) Tabel Of Content

Tabel of content atau daftar isi ini memiliki fungsi untuk menampilkan rincian dari isi artikel dalam bentuk link yang akan memudahkan pembaca untuk langsung menuju ke poin utama.

Manfaat (TOC) Tabel Of Content

Tabel of content biasanya terletak sebelum atau setelah paragraf pertama postingan, pengujung kalian hanya dapat membaca beberapa baris di halaman atas atau seluruh artikel kalian.

Jadi , TOC atau daftar isi bisa bermanfaat dan dapat membantu :

Membuat tampilan terkesan lebih profesional pada artikel blog
Mengatur poin-poin penting dalam artikel dan menunjukkan ke pembaca bahwa poin-poin tersebut telah diatur
Membantu pembaca untuk langsung menuju ke poin utama dari isi artikel

Apakah (TOC) Tabel Of Content bisa Meningkatkan SEO?

Ya, tabel of content bisa mengoptimalkan mesin pencari untuk blog kalian. Berikut alasan kenapa tabel of content bisa mengoptimalkan SEO.

Ketika kalian menulis artikel yang panjang dan membuat tabel of content. Artikel anda akan dibagi menjadi beberapa sub-bagian dengan aspek-aspek berbeda tentang topik yang sama.

Jadi artikel yang panjang akan cenderung memiliki peringkat yang lebih tinggi pada mesin pencari seperti google.

Dapat menaikan CTR situs anda karena menggunakan jumpa link (lompat ke bagian tautan) yang dirayapi dari Tabel Of Content dan akan menampilkan hasil relevan bagi pengguna.

Cara membuat Tabel Of Content Otomatis di Postingan Blogger

Sebelum lanjut ke tutorialnya ada baiknya kalian untuk back-up template kalian terlebih dahulu, untuk menghindari hal yang tidak diinginkan.

Tutorial ini sama seperti cara membuat tabel of content mirip Wikipedia. Oke langsung saja kalian bisa mengikuti langkah-langkah berikut ini.

1. Langkah Pertama, silakan login ke blog blogger kalian lalu masuk ke menu Template/ Tema dan pilih edit HTML

2. Langkah Kedua, cari tag kode</head> dan letakan kode berikut tepat diatasnya.

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/* 
 * Blogspot TOC
 * https://www.kangdims.com/2025/03/tabel-of-content-otomatis-blogger.html
*/
.kangdimstoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.kangdimstoc ol, .kangdimstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.kangdimstoc ul {
 list-style: disc;
}
.kangdimstoc ol li, .kangdimstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.kangdimstoc a {
 text-decoration: none;
}
.kangdimstoc a:hover {
 text-decoration: underline;
}
.kangdimstoc .kangdimstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.kangdimstoc .kangdimstocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.kangdimstoc .kangdimstocHeader 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 kangdimstoc() {
 var kangdimstoc = 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);
 kangdimstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("kangdimstoc").innerHTML += kangdimstoc;
 }
 } else { document.write("<style>.kangdimstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function kangdimstocShow() {
    var kangdimstocBtn = document.getElementById('kangdimstoc');
 var kangdimstocWrapID = document.getElementById('kangdimstocwrap');
 var kangdimstocLink = document.getElementById('kangdimstocLink');
    if (kangdimstocBtn.style.display === 'none') {
        kangdimstocBtn.style.display = 'block';
 kangdimstocWrapID.style.display = 'block';
 kangdimstocLink.innerHTML = 'Tutup';
 
    } else {
        kangdimstocBtn.style.display = 'none';
 kangdimstocWrapID.style.display = 'inline-block';
 kangdimstocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#kangdimstocwrap,.kangdimstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

3. Langkah Ketiga, cari kode <data:post.body/> lalu hapus kode tersebut dan ganti dengan kode berikut

 <div id='post-toc'>
<div id='kangdimstocwrap' class='kangdimstoc' style='display:inline-block;'><div class='kangdimstocHeader'>Konten [<a id='kangdimstocLink' onclick='kangdimstocShow()'>Tampil</a>]</div><ul id='kangdimstoc' style='display:none'/></div>
<data:post.body/>
<script>kangdimstoc();</script>
</div>

4. Langkah Keempat, silakan klik Simpan Tema dan lihat hasilnya.

Cara Memunculkan (TOC) Tabel Of Content pada Artikel Blog

Untuk TOC Tabel Of Content ini akan secara otomatis muncul disetiap artikel yang kalian buat tanpa perlu otak-atik kode lagi.

Agar tabel TOC muncul pada artikel anda, sebaiknya setiap artikel yang kalian tulis wajib memiliki heading seperti h2, h3 atau h4.

Untuk hasil TOC yang anda buat diatas bisa lihat pada bagian atas artikel ini.

Penutup

Mungkin cukup sampai di sini tutorialCara membuat tabel of content (TOC) Otomatis di artikel blogger, semoga bermanfaat. Jika ada pertanyaan silakan tulis pada kolom komentar dibawah.