Pernahkah Anda membaca artikel blog yang panjang dan merasa kesulitan menemukan poin penting yang ingin segera dibaca? Di sinilah peran navigasi dalam artikel sangat dibutuhkan. Kode yang akan kita bahas kali ini berfungsi untuk memindai seluruh subjudul di dalam tulisan Anda dan merangkumnya secara otomatis menjadi sebuah menu navigasi ringkas yang bisa diklik kapan saja oleh pengunjung.
Menerapkan fitur ini mungkin terdengar teknis, namun sebenarnya sangat mudah dilakukan bahkan jika Anda belum pernah menyentuh kode sama sekali. Panduan ini dirancang khusus agar Anda bisa langsung menempelkan kode ke dalam blog tanpa khawatir merusak tampilan yang sudah ada.
Apa Itu Script Daftar Isi Otomatis?
Script daftar isi adalah sekumpulan baris perintah yang ditulis menggunakan perpaduan HTML, CSS, dan JavaScript ringan. Fungsi utamanya adalah membaca struktur tulisan Anda, khususnya pada bagian heading atau judul sub-topik, lalu menyusun ulang teks tersebut menjadi tautan aktif. Saat tautan tersebut diklik, layar pembaca akan otomatis menggulir ke bagian paragraf yang dituju tanpa harus memuat ulang halaman.
Kode yang dibagikan dalam tutorial ini sepenuhnya mandiri. Artinya, kode ini tidak bergantung pada layanan pihak ketiga yang sering kali membuat proses pemuatan blog menjadi lambat. Semua proses berjalan secara langsung di dalam peramban web pembaca secara instan.
Manfaat Penggunaan Kode Daftar Isi di Blogger
Penggunaan elemen navigasi dalam artikel memberikan dua keuntungan besar sekaligus, yaitu untuk kenyamanan pembaca manusia dan optimalisasi mesin pencari seperti Google. Dari sisi pembaca, mereka akan merasa sangat terbantu karena bisa langsung melompat ke bagian yang memberikan solusi atas masalah mereka. Pengalaman membaca yang baik ini membuat pengunjung betah berlama-lama di blog Anda.
Dari sisi mesin pencari, struktur tautan internal yang dihasilkan oleh script ini sangat disukai oleh robot perayap Google. Daftar isi membantu mesin pencari memahami konteks dan hierarki topik yang Anda bahas. Bahkan, tidak jarang Google akan menampilkan tautan khusus atau sitelink langsung di halaman hasil pencarian yang mengarah ke bagian tertentu dari artikel Anda berkat adanya fitur ini.
Contoh Penerapan dalam Artikel Blogger
Bayangkan Anda sedang menulis artikel panduan wisata komprehensif yang membahas sepuluh lokasi berbeda lengkap dengan tips dan rute perjalanan. Tanpa adanya navigasi, pengunjung harus menggulir layar perlahan-lahan untuk menemukan lokasi spesifik yang mereka incar.
Dengan menerapkan script ini, di bagian atas artikel Anda akan muncul sebuah kotak rapi berisi sepuluh nama lokasi tersebut. Pengunjung yang hanya ingin membaca lokasi kelima cukup mengeklik nama lokasinya di dalam kotak, dan layar akan langsung meluncur tepat ke pembahasan lokasi kelima. Sangat praktis dan menghemat waktu.
Kode HTML Lengkap Siap Pakai
Berikut ini adalah kumpulan kode yang perlu Anda gunakan. Kode ini sengaja dipisah menjadi bagian gaya atau desain dan bagian kerangka. Tujuannya agar Anda lebih mudah memahami fungsi masing-masing bagian.
Kode CSS untuk Desain Tampilan
Kode pertama ini berfungsi untuk memberikan warna latar, mengatur batas kotak, dan membuat tulisan di dalamnya terlihat rapi dan modern. Silakan salin kode CSS berikut ini.
<style>
.toc-container {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
font-family: inherit;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.toc-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
display: block;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.toc-h2 {
color: #0056b3;
font-weight: 600;
margin-top: 8px;
display: block;
text-decoration: none;
padding: 5px 0;
transition: all 0.3s ease;
}
.toc-h3 {
color: #495057;
margin-top: 4px;
display: block;
text-decoration: none;
padding: 5px 0 5px 15px;
font-size: 0.95em;
transition: all 0.3s ease;
}
.toc-container a:hover {
color: #dc3545;
padding-left: 5px;
}
.toc-h3:hover {
padding-left: 20px;
}
</style>
Kode HTML dan JavaScript Utama
Kode kedua adalah mesin utamanya. Kerangka kotak dipadukan dengan logika yang akan mencari semua subjudul di dalam postingan Anda. Salin seluruh kode di bawah ini.
<div class="toc-container" id="toc-container">
<span class="toc-title">Daftar Isi</span>
<div id="toc-content"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var postContent = document.querySelector('.post-body') || document.body;
var headings = postContent.querySelectorAll('h2, h3');
var tocContent = document.getElementById('toc-content');
if (headings.length > 0 && tocContent) {
for (var i = 0; i < headings.length; i++) {
var heading = headings[i];
var headingId = heading.id || 'toc-head-' + i;
heading.id = headingId;
var link = document.createElement('a');
link.href = '#' + headingId;
link.innerText = heading.innerText || heading.textContent;
link.className = heading.tagName.toLowerCase() === 'h3' ? 'toc-h3' : 'toc-h2';
tocContent.appendChild(link);
}
} else {
var tocContainer = document.getElementById('toc-container');
if (tocContainer) tocContainer.style.display = 'none';
}
});
</script>
Cara Memasang Kode di Blogger (Mode HTML)
Proses pemasangannya tidak memerlukan akses ke menu tema, sehingga sangat aman dari risiko merusak desain blog secara keseluruhan. Anda hanya perlu meletakkannya langsung saat membuat atau mengedit artikel.
Langkah pertama, masuklah ke dashboard Blogger Anda seperti biasa. Mulailah menulis artikel baru atau pilih salah satu artikel lama yang teksnya cukup panjang untuk diedit kembali.
Langkah kedua, pada halaman editor artikel, perhatikan ikon bergambar pensil di sudut kiri atas layar. Klik ikon tersebut dan ganti mode dari Tampilan Menulis menjadi Tampilan HTML. Pada mode ini, Anda akan melihat teks artikel Anda bercampur dengan kode-kode penanda.
Langkah ketiga, tentukan posisi strategis untuk meletakkan daftar isi. Posisi paling ideal adalah setelah paragraf pertama atau paragraf kedua pembuka artikel. Letakkan kursor Anda pada posisi tersebut, lalu tempelkan kode CSS terlebih dahulu, dilanjutkan dengan menempelkan kode HTML utama tepat di bawahnya.
Langkah keempat, setelah semua kode berhasil ditempel, Anda bisa mengembalikan editor ke Tampilan Menulis untuk melanjutkan mengetik artikel seperti biasa. Kotak navigasi mungkin belum terlihat sempurna di mode ini, namun jangan khawatir karena itu adalah hal yang wajar.
Panduan Penggunaan Langkah demi Langkah
Agar script ini bisa bekerja secara otomatis mendeteksi bagian penting artikel Anda, ada satu aturan penulisan yang wajib Anda ikuti dengan tertib di dalam editor Blogger.
Syarat utamanya adalah Anda harus menggunakan format Judul atau Subjudul yang disediakan oleh Blogger untuk setiap pergantian topik. Caranya, blok teks yang ingin dijadikan subjudul, lalu klik menu tarik-turun yang secara bawaan bertuliskan Paragraf di bilah atas editor, dan ubah menjadi Judul atau Subjudul.
Sebagai informasi tambahan, script ini dirancang hanya untuk membaca format Judul dan Subjudul. Jika Anda hanya menebalkan teks biasa menggunakan fitur Bold tanpa mengubah formatnya menjadi Judul, maka teks tersebut tidak akan terdeteksi oleh sistem pemindai.
Panduan Cara Menguji Keberhasilan Script
Setelah artikel selesai ditulis dan semua format judul sudah diatur dengan benar, saatnya menguji apakah rangkaian kode yang ditanamkan sudah berfungsi sebagaimana mestinya.
Cara paling aman adalah menekan tombol Pratinjau yang ada di sudut kanan atas layar editor. Jendela baru akan terbuka menampilkan simulasi tampilan artikel Anda ketika diterbitkan nanti.
Gulir perlahan ke bawah paragraf pembuka. Anda seharusnya melihat sebuah kotak elegan bertuliskan Daftar Isi. Di dalam kotak tersebut, pastikan semua subjudul yang Anda tulis sudah muncul berurutan. Cobalah klik salah satu tulisan di dalam kotak tersebut. Jika layar Anda seketika melompat tepat ke bagian paragraf yang bersangkutan, berarti instalasi sukses dan artikel siap dipublikasikan.
Pembahasan Tentang Kesalahan Umum Saat Mengedit
Sangat wajar jika pada percobaan pertama terjadi sedikit kendala. Kesalahan yang paling sering ditemui adalah kotak daftar isi tidak muncul sama sekali di halaman pratinjau maupun setelah diterbitkan.
Penyebab utama dari masalah ini biasanya karena tidak adanya format Judul atau Subjudul di dalam artikel. Pastikan kembali Anda sudah menggunakan format Heading yang benar lewat alat editor Blogger, bukan sekadar membesarkan ukuran huruf atau menebalkan font.
Masalah lain yang kadang muncul adalah kode tertempel di tengah-tengah tag HTML lain secara tidak sengaja. Saat menempelkan kode di mode HTML, pastikan Anda menempelkannya di area kosong, atau membuat baris baru yang benar-benar bersih, tepat setelah tag penutup paragraf.
Penutup
Kehadiran fitur navigasi yang jelas merupakan salah satu tanda bahwa sebuah blog dikelola secara serius dan sangat peduli pada kenyamanan audiensnya. Penerapan teknik ini akan memberikan dampak positif jangka panjang bagi pertumbuhan organik situs Anda.
Semoga panduan lengkap ini mudah diikuti dan langsung memberikan manfaat nyata. Selamat mempraktikkan kode di atas, teruslah menulis konten berkualitas, dan buatlah struktur blog Anda semakin profesional.