Table of Content (TOC) merupakan elemen penting dalam sebuah artikel blog, terutama untuk meningkatkan kenyamanan pembaca dan membantu mesin pencari memahami struktur konten. Dengan adanya TOC, pengunjung bisa langsung menuju bagian artikel yang mereka butuhkan tanpa harus scroll terlalu panjang.
DAFTAR ISI
Penjelasan ToC Auto Generate untuk Blogspot
Script TOC khusus Blogspot ini dibuat agar ringan, otomatis, dan bebas ribet. Cukup tempelkan script, maka daftar isi akan muncul secara otomatis berdasarkan heading artikel, tanpa perlu setting manual. Selain mempercantik tampilan, fitur ini juga membantu meningkatkan pengalaman pengguna serta potensi optimasi SEO pada blog kamu.
Script ToC Siap Pakai
Silakan gunakan script berikut untuk mengaktifkan Table of Content otomatis di artikel Blogspot kamu.
<!-- TOC AUTO SMART -->
<style>
#auto-toc{
background:#f8f9fa;
border:1px solid #ddd;
padding:15px;
margin:20px 0;
border-radius:8px;
font-size:14px;
}
#auto-toc strong{
display:block;
margin-bottom:10px;
font-size:15px;
}
#auto-toc ul{
padding-left:18px;
margin:0;
}
#auto-toc li{margin-bottom:6px;}
#auto-toc a{text-decoration:none;color:#0073aa;}
#auto-toc a:hover{text-decoration:underline;}
html{scroll-behavior:smooth;}
</style>
<div id="auto-toc">
<strong>DAFTAR ISI</strong>
<ul id="toc-list"></ul>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
const tocList = document.getElementById("toc-list");
const headings = document.querySelectorAll("h3");
headings.forEach((h, i) => {
const text = h.innerText.trim().toLowerCase();
// FILTER JUDUL YANG TIDAK BOLEH MASUK TOC
if(
text.includes("related") ||
text.includes("komentar") ||
text.includes("comment") ||
text.includes("posting komentar")
) return;
if(!h.id){
let id = text.replace(/[^a-z0-9]+/g,'-');
h.id = id + "-" + (i+1);
}
const li = document.createElement("li");
const a = document.createElement("a");
a.href = "#" + h.id;
a.textContent = h.innerText;
li.appendChild(a);
tocList.appendChild(li);
});
if(!tocList.children.length){
document.getElementById("auto-toc").style.display="none";
}
});
</script>
<!-- END TOC -->
Post a Comment