Membaca artikel yang sangat panjang terkadang membuat pengunjung kesulitan menemukan informasi spesifik yang mereka butuhkan secara cepat. Untuk mengatasi hal ini, Anda membutuhkan sebuah fitur navigasi ringkas di dalam artikel yang sering disebut sebagai daftar isi atau table of contents. Karena Blogger tidak menyediakan fitur ini secara bawaan, panduan ini akan membagikan cara membuat daftar isi otomatis yang sangat ramah mesin pencari tanpa perlu membebani situs Anda dengan plugin pihak ketiga.
Mengenal Script Daftar Isi Otomatis
Script daftar isi otomatis adalah sekumpulan kode JavaScript dipadukan dengan gaya CSS yang bekerja dengan cara memindai seluruh isi artikel Anda. Kode ini secara pintar akan mencari setiap subjudul yang Anda buat, kemudian menyusunnya menjadi sebuah daftar tautan di bagian atas artikel. Ketika pengunjung mengklik salah satu tautan tersebut, layar akan langsung menggulir secara otomatis ke bagian subjudul yang relevan.
Manfaat Utama untuk Kelangsungan Blog
Manfaat terbesar dari pemasangan fitur ini adalah peningkatan drastis pada pengalaman pengguna, karena pembaca dapat melompat langsung ke bagian yang paling mereka minati. Dari sisi optimasi mesin pencari, Google sangat menyukai struktur artikel yang jelas. Tautan dari daftar isi ini sering kali dibaca oleh sistem Google dan ditampilkan sebagai tautan pintasan atau sitelinks di halaman hasil pencarian, yang tentunya akan membuat blog Anda terlihat lebih profesional dan mengundang lebih banyak klik.
Contoh Penerapan di Halaman Blog
Bayangkan Anda memiliki sebuah blog resep masakan dan menulis artikel panjang tentang cara membuat rendang. Di dalam artikel tersebut, Anda memiliki subjudul seperti bahan-bahan, bumbu halus, dan cara memasak. Dengan fitur ini, sebuah kotak daftar isi akan muncul tepat di bawah paragraf pembuka Anda. Jika pembaca hanya ingin melihat bumbu halus, mereka cukup mengklik teks bumbu halus di dalam kotak tersebut, dan layar akan langsung meluncur ke bagian bumbu tanpa harus repot menggulir layar secara manual.
Kode Lengkap Siap Pakai
Berikut adalah susunan kode lengkap yang terdiri dari gaya CSS untuk mempercantik tampilan kotak dan JavaScript untuk menjalankan fungsi otomatisnya. Kode ini dirancang sangat ringan dan menggunakan tag tautan blok biasa agar tidak mengganggu struktur bawaan template Anda.
<style>
/* Tampilan Kotak Daftar Isi */
.toc-container {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
display: block;
}
.toc-title {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
display: block;
}
.toc-link {
display: block;
color: #0056b3;
text-decoration: none;
margin-bottom: 10px;
font-size: 15px;
transition: color 0.3s ease;
}
.toc-link:hover {
color: #003d82;
}
.toc-link-h3 {
margin-left: 20px;
font-size: 14px;
color: #495057;
}
</style>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
var tocBox = document.getElementById("toc-box");
if (!tocBox) return;
var postContent = document.querySelector(".post-body");
if (!postContent) return;
var headings = postContent.querySelectorAll("h2, h3");
if (headings.length === 0) return;
var tocHTML = "<span class='toc-title'>Daftar Isi Artikel</span>";
for (var i = 0; i < headings.length; i++) {
var heading = headings[i];
var headingId = "bagian-" + i;
heading.setAttribute("id", headingId);
var linkClass = "toc-link";
if (heading.tagName.toLowerCase() === "h3") {
linkClass = "toc-link toc-link-h3";
}
tocHTML += "<a href='#" + headingId + "' class='" + linkClass + "'>" + heading.innerText + "</a>";
}
tocBox.innerHTML = tocHTML;
tocBox.classList.add("toc-container");
});
//]]>
</script>Cara Memasang Kode di Blogger
Langkah pertama, masuklah ke dalam dashboard akun Blogger Anda melalui peramban web di komputer. Perhatikan deretan menu yang berada di panel sebelah kiri, kemudian cari dan klik menu Tema untuk masuk ke halaman pengaturan desain visual situs Anda.
Langkah kedua, perhatikan tombol Sesuaikan yang berada di bagian atas layar. Anda harus mengklik ikon panah kecil yang terletak persis di sebelah kanan tombol tersebut. Dari menu tarik-turun yang muncul, pilihlah opsi Edit HTML untuk membuka jendela editor struktur template.
Langkah ketiga, arahkan kursor Anda ke area kode dan klik satu kali. Tekan tombol kontrol dan huruf F di keyboard secara bersamaan untuk memunculkan kotak pencarian. Ketikkan tag penutup body yaitu </body> ke dalam kotak pencarian dan tekan enter untuk menemukan lokasinya.
Langkah keempat, salin seluruh baris kode CSS dan JavaScript yang telah disediakan di atas. Tempelkan kode yang sudah disalin tersebut persis satu baris di atas tag </body> yang berkedip tadi. Setelah terpasang rapi, klik ikon disket di sudut kanan atas untuk menyimpan pengaturan template Anda.
Langkah kelima, setiap kali Anda menulis artikel baru dan ingin memunculkan daftar isi tersebut, Anda hanya perlu beralih ke mode Tampilan HTML di editor postingan Blogger. Letakkan kode pemanggil pendek yaitu <div id="toc-box"></div> di bagian mana saja Anda ingin daftar isi tersebut muncul, misalnya tepat di bawah paragraf pertama.
Cara Menguji Keberhasilan Script
Setelah menanamkan kode di template dan meletakkan kode pemanggil di dalam artikel, langkah krusial berikutnya adalah memastikan kotak navigasi tersebut muncul dan berfungsi. Anda bisa melakukan pengujian ini langsung melalui halaman artikel yang sudah dipublikasikan.
Silakan buka artikel yang telah Anda pasangi kode pemanggil tersebut. Pastikan artikel tersebut memiliki minimal dua atau tiga subjudul agar hasilnya terlihat. Perhatikan area tempat Anda meletakkan kode pemanggil, jika muncul sebuah kotak rapi berjudul Daftar Isi Artikel yang berisi teks subjudul Anda, berarti kode telah berjalan. Cobalah klik salah satu baris teks di dalam kotak tersebut, layar Anda seharusnya langsung meluncur turun ke subjudul yang bersangkutan.
Kesalahan Umum Saat Mengedit Template
Lupa Meletakkan Kode Pemanggil
Kesalahan yang paling sering ditemui oleh pemula adalah mengharapkan daftar isi muncul secara ajaib di semua artikel tanpa meletakkan tag div pemanggil. Script ini dirancang khusus agar Anda memiliki kendali penuh di artikel mana saja daftar isi tersebut ingin ditampilkan. Jika tag pemanggil tidak ada di dalam artikel, maka script cerdas ini tidak akan merender apa pun agar halaman tetap ringan.
Salah Menggunakan Tag Subjudul
Script ini hanya mendeteksi teks yang diformat menggunakan tag heading dua dan heading tiga. Banyak penulis blog yang membuat subjudul hanya dengan menebalkan teks biasa menggunakan fitur bold atau teks tebal. Teks yang hanya ditebalkan tidak akan terbaca oleh script ini. Pastikan Anda selalu menyorot teks subjudul di editor postingan dan memilih opsi Judul atau Subjudul pada menu format paragraf bawaan Blogger.
Penutup
Semoga panduan dan tutorial cara memasang script daftar isi otomatis di Blogger ini bermanfaat dan dapat langsung Anda praktikkan untuk meningkatkan kualitas navigasi situs Anda. Jika Anda memiliki pertanyaan atau mengalami kendala teknis saat menerapkan langkah-langkah di atas, jangan ragu untuk berdiskusi melalui kolom komentar di bawah. Ikuti terus blog ini untuk mendapatkan update tutorial, tips, dan trik menarik lainnya seputar dunia optimasi website. Selamat mencoba!