Cara Membuat Daftar Isi Otomatis di Blogger: 8 Desain Smart TOC + Generator

---

P ernah buka artikel panjang lalu harus scroll naik-turun cuma buat mencari satu bagian? Kalau isinya tutorial, dokumentasi, atau panduan dengan banyak subjudul, hal kecil seperti ini cepat bikin capek. Daftar isi bisa membantu, tapi saya maunya bukan sekadar kotak link di awal artikel. Harus benar-benar enak dipakai buat loncat ke bagian yang dibutuhkan.

Dari kebutuhan itu saya bikin Smart Table of Contents untuk Blogger. Widget ini membaca H2 dan H3 otomatis, lalu menyusunnya jadi navigasi artikel. Tampilannya juga tidak mentok satu model: ada delapan desain, pilihan warna, sticky mode, progress membaca, smooth scroll, dan generator kode supaya tidak perlu bongkar CSS satu per satu.

Informasi Singkat

---

Smart TOC CodeFlare membaca H2/H3 otomatis, punya 8 desain, sticky auto compact, progress baca, warna custom, numbering, smooth scroll, dan generator kode siap pakai. Tidak memakai jQuery dan kode hasil generator memakai ID unik supaya lebih aman kalau dipasang di halaman yang sama dengan komponen lain.

Kenapa Artikel Panjang Lebih Enak Pakai Daftar Isi?

Kalau artikelnya pendek, TOC memang tidak wajib. Tapi begitu pembahasannya mulai panjang, daftar isi terasa seperti peta kecil. Pembaca bisa langsung lihat isi artikel dan lompat ke bagian yang memang mereka cari tanpa harus menyisir semuanya dari atas.

Paling terasa di tutorial Blogger, panduan coding, troubleshooting, review panjang, atau dokumentasi. Orang yang datang dari Google juga sering punya tujuan yang spesifik. Mereka ingin menemukan satu jawaban secepat mungkin, bukan selalu membaca artikel dari paragraf pertama sampai terakhir.

Apa yang Bikin Smart TOC Ini Berbeda?

Awalnya idenya sederhana: ambil heading lalu jadikan daftar isi. Setelah dicoba di artikel panjang, baru terasa satu masalah. Begitu TOC sudah jauh tertinggal di atas, kita harus scroll balik cuma untuk pindah bagian. Nah, dari situ sticky mode mulai masuk.

Saya juga tidak mau kotak TOC besar terus nongkrong di layar. Jadi saat pembaca melewati batas bawah TOC sekitar 10px, widget menutup dulu lalu muncul sebagai header sticky yang lebih compact. Kalau menu sedang terbuka dan salah satu item diklik, panel menutup lebih dulu baru halaman bergerak ke heading tujuan.

Saat kembali ke posisi awal TOC, mode sticky dilepas dan daftar isi kembali tampil normal. Jadi widget tetap terasa seperti bagian artikel, bukan panel yang terus menempel tanpa kontrol.

Delapan Desain yang Bisa Dipilih

Saya sengaja tidak membuat delapan skin yang cuma beda warna. Masing-masing punya karakter visual sendiri supaya lebih gampang disesuaikan dengan gaya template.

Aurora Prism Glass dan aurora dengan nuansa futuristik.

Reactor Spine Gaya energy reactor dengan garis pusat dan node.

Ghost Terminal Tampilan terminal gelap untuk blog teknologi.

Ledger Pro Lebih bersih dan profesional.

Retro Wave Nuansa synthwave dan retro.

Digitize Matrix Grid digital untuk tema coding dan teknologi.

Cassette Deck Terinspirasi perangkat audio retro.

Paper Index Model indeks dokumen yang lebih sederhana.

Buat Smart TOC Sendiri Lewat Generator

Bagian ini yang paling praktis. Pilih desain, atur warna utama, background dan warna teks, tentukan heading yang ingin dibaca, lalu tekan Generate Kode . Preview di bawah dibuat dummy supaya tidak berebut heading dengan TOC yang mungkin sudah aktif pada artikel ini.

Preview generator tidak membaca H2/H3 artikel ini. Engine TOC asli baru ada di kode yang dihasilkan setelah tombol Generate Kode ditekan.

Warna utama

Background

Warna teks

Judul TOC

Heading H2 + H3 H2 saja

Sticky offset

Sticky + auto compact Nomor Progress Smooth scroll

Daftar Isi

01 Pembahasan Pertama

02 Pembahasan Kedua

03 Sub Pembahasan

Preview dummy dan tidak membaca heading artikel. Kode hasil generator memakai ID unik.

Pengaturan yang Bisa Diubah dari Generator

Kalau ingin cepat, sebenarnya cukup pilih desain lalu generate. Tapi beberapa pengaturan tambahan bisa bikin hasilnya lebih menyatu dengan template Blogger yang dipakai. Ada pilihan warna utama, background, seluruh teks, H2 + H3 atau H2 saja, sticky, numbering, progress membaca, dan smooth scroll.

Cara Memasang Kode Smart TOC di Blogger

Setelah selesai mengatur generator, klik Generate Kode lalu salin hasilnya. Buka editor artikel Blogger dalam mode HTML dan tempel kode Smart TOC pada posisi yang diinginkan. Posisi yang paling nyaman biasanya setelah paragraf pembuka atau sebelum pembahasan utama dimulai.

Jangan menaruh widget di dalam tag H2 atau H3. Biarkan Smart TOC berdiri sebagai blok sendiri di antara paragraf supaya struktur artikel tetap rapi.

Heading Tidak Muncul? Cek Ini Dulu

Kalau daftar isi kosong, cek apakah judul bagian artikel benar-benar memakai tag H2 atau H3. Teks yang cuma dibesarkan dengan CSS atau tombol ukuran font tetap dianggap paragraf biasa dan tidak akan dibaca sebagai heading.

Kalau generator diatur ke H2 saja , heading H3 memang sengaja tidak dimasukkan. Ubah ke H2 + H3 kalau subpembahasan juga ingin ikut masuk ke daftar isi.

Ikon Header dan Font Awesome 7

Generator memakai ikon Font Awesome 7 supaya tampilannya konsisten dengan komponen CodeFlare lain. Kalau template sudah memuat FA7, tidak perlu memasangnya lagi. Kalau ikon tidak muncul, cek dulu apakah Font Awesome sudah aktif di template. Dokumentasi resminya bisa dilihat di Font Awesome .

TOC Bukan Pengganti Struktur Artikel yang Rapi

Widget ini bisa membantu navigasi, tapi jangan membuat heading cuma supaya daftar isinya terlihat panjang. Gunakan H2 untuk pembahasan utama dan H3 saat memang ada subpembahasan di bawahnya. Struktur yang masuk akal tetap lebih penting daripada efek visual.

Untuk artikel pendek, saya juga tidak menyarankan memaksakan TOC. Pakai ketika benar-benar membantu pembaca. Pada tutorial, dokumentasi, artikel teknis, atau tulisan yang punya banyak bagian, barulah fitur sticky dan navigasi cepat terasa manfaatnya.

Silakan Coba dan Sesuaikan dengan Template

Delapan desain yang ada sekarang sudah cukup fleksibel: ada yang futuristik, profesional, retro, digital, sampai model dokumen yang sederhana. Coba beberapa kombinasi warna lalu pilih yang paling cocok dengan template. Tidak perlu memaksa semua fitur aktif sekaligus; yang penting TOC terasa membantu, bukan malah bikin artikel lebih ramai.