Membuat Table of Contents Otomatis di Blogger, Tanpa jQuery

deuxly.id

Artikel panjang itu bagus buat SEO, tapi jadi mimpi buruk buat user experience kalau navigasinya nol. Pernah liat dokumentasi library coding kayak Hugo atau React yang punya sidebar rapi di samping? Nah, itu standar emasnya.

Di postingan kali ini, aku ngga bakal ngajarin cara pasang widget berat atau script jQuery tahun 2015. Kita bakal bangun Table of Contents (TOC) Otomatis pakai Vanilla JavaScript murni.

Konsepnya simpel: Script ini bakal otomatis scan semua tag <h2> dan <h3> di artikelmu, terus nyusun mereka jadi daftar isi yang rapi. Tanpa edit HTML manual tiap posting.

Kenapa fitur ini wajib ada di blog teknomu?

• User Friendly: Pembaca sekarang itu scanners. Mereka mau langsung lompat ke solusi, bukan baca basa-basi, jadi kalau ada toc mereka bisa langsung klik biar langsung ke poin yang mereka mau.
• SEO Booster: Google cinta struktur. Dengan TOC, artikelmu berpeluang dapet fitur “Jump Links” (link biru kecil di bawah deskripsi) pas muncul di hasil pencarian.

Script ini udah aku optimasi buat standar web modern (Desember 2025). Jadi buat kamu yang masih setia pake Blogger tapi pengen performa rasa static site, gas langsung kita eksekusi kodenya!

Persiapan Sebelum Memulai

Sebelum langsung coding, pastikan kamu siap. Ini langkah dasar untuk menghindari masalah:

• Akses Dashboard Blogger: Masuk ke blogger.com, pilih blogmu, lalu masuk ke menu Tema > Edit HTML. Ini tempat kita buat nambahin kode.
• Backup Tema: Klik tombol download tema dulu. Kalau ada kesalahan, bisa restore dengan mudah.
• Tools yang Dibutuhin: Browser seperti Chrome dengan fitur inspect element untuk testing. Kamu juga bisa pakai notepad sederhana untuk edit kode sementara.
• Update Blogger 2026: Blogger sekarang lebih fokus sama template yang responsive dan integrasi dengan Google Search Console. Pastiin templatemu udah update ke versi terbaru supaya kode JS berjalan lancar tanpa konflik, bisa coba pakai template blogger Igniel Clone, Median UI, Igniplex. Template-template itu sangat bagus dan memiliki tampilan yang responsif.

Kalu blogmu baru, ngga masalah, TOC ini bisa dipakai walaupun template default blogger.

Metode Membuat TOC Otomatis

Ada beberapa Cara membuat TOC di Blogger. Aku bandingin biar kamu bisa pilih yang cocok. Berikut tabel ringkasannya:

Rekomendasi utama: Gunakan metode JS karena paling otomatis dan cocok untuk blog aktif.

Tutorial: Metode Rekomendasi JS Otomatis

Kita pakai Vanilla JavaScript yang ringan, tanpa library eksternal. Ini akan deteksi heading H2-H4 bisa juga dikustom dan buat TOC dengan link anchor. TOC cuma muncul kalau ada minimal 3 heading untuk menghindari tampilan kosong di post pendek.

Tambahkan CSS untuk Styling

Di Edit HTML, cari ]]></b:skin> dan tambahin kode ini tepat di atasnya:

.toc-container {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
}
.toc-title {
  font-weight: bold;
  margin-bottom: 10px;
}
.toc-list {
  list-style-type: none;
  padding: 0;
}
.toc-list li {
  margin-bottom: 5px;
}
.toc-list a {
  text-decoration: none;
  color: #333;
}
.toc-list a:hover {
  text-decoration: underline;
}

Ini bikin TOC tampil rapi dan responsive.

Tambahin JavaScript

Cari </body> dan tambah kode di bawah ini tepat di atasnya:

<script>
function generateTOC() {
  var postBody = document.querySelector('.post-body');
  if (!postBody) return;
  
  var headings = postBody.querySelectorAll('h2, h3, h4');
  if (headings.length < 3) return; // Minimal 3 heading
  
  var tocContainer = document.createElement('div');
  tocContainer.className = 'toc-container';
  
  var tocTitle = document.createElement('div');
  tocTitle.className = 'toc-title';
  tocTitle.textContent = 'Daftar Isi';
  tocContainer.appendChild(tocTitle);
  
  var tocList = document.createElement('ul');
  tocList.className = 'toc-list';
  
  headings.forEach(function(heading, index) {
    var id = 'heading-' + index;
    heading.id = id;
    
    var link = document.createElement('a');
    link.href = '#' + id;
    link.textContent = heading.textContent;
    
    var listItem = document.createElement('li');
    listItem.style.paddingLeft = (heading.tagName === 'H3' ? '15px' : heading.tagName === 'H4' ? '30px' : '0');
    listItem.appendChild(link);
    tocList.appendChild(listItem);
  });
  
  postBody.insertBefore(tocContainer, postBody.firstChild);
  tocContainer.appendChild(tocList);
}

window.addEventListener('load', generateTOC);
</script>

Test di Post

Buat post baru dengan beberapa heading (H2-H4). Preview atau publish, dan cek apakah TOC muncul. Kalau muncul, klik link yang ada di toc, dan pastiin harus scroll otomatis ke heading yang benar.

Kustom Posisi

Kalau mau TOC di tempat lain, ganti postBody.insertBefore(tocContainer, postBody.firstChild); pakai logika lain, misalnya append ke elemen spesifik.

Kustom Lanjutan

Mau bikin TOC lebih menarik? Coba ini:

• Ubah Desain: Tambah background: #fff; di CSS untuk white mode, atau pakai media query untuk dark mode: @media (prefers-color-scheme: dark) { .toc-container { background: #333; color: #fff; } }.
• Tambah Fitur Toggle: Tambah checkbox di JS: Buat elemen input type=“checkbox” dan hide/show list dengan CSS :checked + .toc-list { display: block; }.
• Multi-Language: Kalau blogmu bilingual (multi bahasa), tambahin variabel buat title seperti tocTitle.textContent = navigator.language === 'id' ? 'Daftar Isi' : 'Table of Contents';.
• Integrasi Analytics: Tambah juga event listener di link: link.addEventListener('click', function() { ga('send', 'event', 'TOC', 'click', this.textContent); }); dan kalau pakai Google Analytics.

Optimasi SEO dan Accessibility

TOC bukan cuma cantik, tapi juga fungsional:

• SEO Boost: Anchor link bantu Google crawl struktur konten. Pastiin headingmu unik dan keyword rich buat featured snippets.
• Accessibility Tips: Tambah ARIA: tocContainer.setAttribute('role', 'navigation'); dan link.setAttribute('aria-label', 'Link ke ' + heading.textContent);. Ini bantu screen reader seperti NVDA.
• Performance: Kode ini ringan (<1KB), tapi test dengan Lighthouse di Chrome DevTools. Kalau mobile lambat, defer JS pakai async attribute atau lazyload.

Troubleshooting Error Umum

Masalah yang paling sering muncul? Ini solusinya:

• TOC Ngga Muncul: Cek dulu ada heading yang cukup ga (minimal 3). Inspect Element dan pilih Console browser cek disitu ada error JS atau ngga. Solusinya Pastiin selector .post-body udah benar di templatemu.
• Konflik Template: Kalau pakai template custom kayak Viomagz, cek konflik class. Solusinya bisa Ganti class TOC jadi unik, misalnya .my-toc-container.
• Mobile Issue: TOC ngga responsive? Tambahin CSS aja: .toc-container { max-width: 100%; overflow: auto; }.
• Error JS: Muncul “undefined” di console? Solusi pakai Wrap kode di if (document.readyState === 'complete') { generateTOC(); } buat mastiin DOM ready.

Contoh dan Demo

Bayangin post tentang Tips Traveling Heading H2 Persiapan H3 Packing List H4 Barang Esensial TOC akan tampil seperti berikut:

• Persiapan
  • Packing List
    • Barang Esensial

Untuk demo livenya, coba pakai di blog testmu. Kalau butuh, buat aja blog dummy di Blogger gratis. Kalau mager bikin blog dummy, bisa cek live demo nya di codepen deuxly:

Kesimpulan

Membuat TOC otomatis di Blogger mudah dan powerful buat ningkatin engagement. Ikuti langkah di atas, dan blogmu bakalan tampil lebih profesional.

Referensi dan Update

Tutorial Table of Content Blogger ini berdasarkan pengalaman umum Blogger dan best practices web development.