Beranda Blogging Technical

Cara Praktis Membuat Daftar Isi Otomatis di Blogger

Gambar
Devi
Updated: • 0 • min read
Table of Contents

Cara Praktis Membuat Daftar Isi Otomatis di Blogger

Saat menulis artikel yang panjang dan mendalam di Blogger, kenyamanan pembaca adalah hal yang harus diutamakan. Jika pengunjung harus menggulir (scroll) layar terlalu lama untuk menemukan informasi spesifik, besar kemungkinan mereka akan langsung meninggalkan blog Anda. Salah satu solusi terbaik untuk mengatasi masalah ini adalah dengan menyediakan Daftar Isi Otomatis (Table of Contents).

Selain meningkatkan pengalaman pengguna (User Experience), memasang daftar isi otomatis juga sangat disukai oleh mesin pencari seperti Google karena membantu robot mereka memahami struktur artikel Anda dengan lebih baik. Mari kita bahas cara praktis membuatnya tanpa perlu keahlian coding yang rumit.

Mengapa Menggunakan Daftar Isi Otomatis?

Sebelum masuk ke langkah teknis, ada beberapa keuntungan utama mengapa fitur ini wajib ada di blog Anda:

  • Navigasi Cepat: Pembaca bisa langsung melompat ke sub-topik (Heading) yang paling relevan bagi mereka hanya dengan sekali klik.
  • Tampilan Profesional: Membuat artikel panjang Anda terlihat lebih terstruktur, rapi, dan mudah dipindai (scannable).
  • Nilai Tambah SEO: Google sering kali menampilkan link daftar isi ini langsung di hasil pencarian (Rich Snippets), yang dapat meningkatkan persentase klik (CTR) blog Anda.

Langkah Demi Langkah Membuat Daftar Isi Otomatis

Metode paling praktis untuk pengguna Blogger adalah dengan memanfaatkan kombinasi sedikit kode CSS dan JavaScript (JS) ringan yang akan mendeteksi tag sub-judul Anda (seperti H2 dan H3) secara otomatis.

Langkah 1: Menyimpan Kode di Dalam Template (Hanya Sekali)

Pertama, kita perlu memasukkan kode dasar ke dalam template blog Anda agar fitur ini bisa berfungsi di semua artikel. Jangan khawatir, langkah ini sangat aman jika diikuti dengan benar.

  1. Masuk ke dasbor Blogger Anda.
  2. Pilih menu Tema (Theme), klik tanda panah kecil di sebelah tombol "Sesuaikan", lalu pilih Edit HTML.
  3. Cari kode </head> (Gunakan tombol Ctrl + F untuk memudahkan pencarian).
  4. Salin kode CSS di bawah ini dan tempelkan tepat di atas kode </head> tersebut:
<style>
.mya-toc {
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    padding: 15px;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 20px;
    border-radius: 4px;
}
.mya-toc-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    font-size: 110%;
}
.mya-toc ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.mya-toc li {
    margin-bottom: 5px;
}
.mya-toc li.toc-h3 {
    padding-left: 20px;
    font-size: 95%;
}
</style>
  1. Selanjutnya, cari kode </body> di bagian paling bawah template Anda.
  2. Tempelkan kode JavaScript berikut tepat di atas kode </body>:
<script>
document.addEventListener("DOMContentLoaded", function() {
    var tocContainer = document.getElementById("show-toc");
    if (tocContainer) {
        var articleBody = document.querySelector(".post-body");
        if (articleBody) {
            var headings = articleBody.querySelectorAll("h2, h3");
            if (headings.length > 0) {
                var tocHtml = "<div class='mya-toc'><div class='mya-toc-title'>Daftar Isi</div><ul>";
                headings.forEach(function(heading, index) {
                    var id = "toc-" + index;
                    heading.setAttribute("id", id);
                    var className = heading.tagName.toLowerCase() === "h3" ? "toc-h3" : "toc-h2";
                    tocHtml += "<li class='" + className + "'><a href='#" + id + "'>" + heading.textContent + "</a></li>";
                });
                tocHtml += "</ul></div>";
                tocContainer.innerHTML = tocHtml;
            }
        }
    }
});
</script>
  1. Klik tombol Simpan (Save) di pojok kanan atas.

Langkah 2: Memanggil Daftar Isi di Dalam Artikel

Setelah kode di template aktif, Anda sekarang bisa memanggil daftar isi ini di artikel mana saja yang Anda inginkan. Caranya sangat mudah:

  • Saat sedang menulis artikel baru atau mengedit artikel lama, ubah mode menulis dari Tampilan Menulis (Compose View) ke Tampilan HTML (HTML View) melalui ikon pensil di pojok kiri atas editor.
  • Tentukan di mana daftar isi ingin ditampilkan (biasanya tepat di bawah paragraf pembuka atau sebelum sub-judul pertama).
  • Tempelkan kode pemanggil berikut di posisi tersebut:
<div id="show-toc"></div>
  • Kembali ke Tampilan Menulis dan lanjutkan menulis seperti biasa. Pastikan Anda menggunakan format "Heading" (H2) atau "Subheading" (H3) untuk setiap sub-topik tulisan Anda.

Aturan Penting Agar Daftar Isi Berfungsi Sempurna

Agar script otomatis di atas bekerja tanpa eror, pastikan Anda memperhatikan hal-hal berikut dalam struktur penulisan Anda:

Yang Harus Dilakukan Yang Harus Dihindari
Gunakan fitur bawaan Blogger untuk mengubah teks menjadi Heading atau Subheading. Jangan sekadar mempertebal (bold) atau memperbesar ukuran font teks secara manual.
Pastikan template Anda menggunakan class standar .post-body untuk area isi artikel. Hindari penggunaan tag H2 atau H3 kosong (tanpa teks) karena akan memunculkan tautan kosong di daftar isi.

Kesimpulan

Membuat daftar isi otomatis di Blogger ternyata tidak sesulit yang dibayangkan. Hanya dengan melakukan investasi waktu sekali saja untuk memasang kode di template, Anda sudah bisa memberikan fasilitas navigasi yang luar biasa nyaman bagi pengunjung blog Anda di setiap artikel mendatang.

Cobalah terapkan cara ini pada artikel-artikel panjang Anda dan perhatikan bagaimana pembaca menjadi lebih betah menjelajahi setiap informasi berharga yang Anda bagikan!

Posting Komentar