Cara Membuat Daftar Isi Otomatis di Blogger

---

# Cara Membuat Daftar Isi Otomatis di Blogger

Daftar isi (Table of Contents/TOC) memudahkan pengunjung menavigasi artikel panjang. Selain meningkatkan pengalaman pembaca, daftar isi juga **membantu SEO** karena memudahkan Google memahami struktur konten. Artikel ini membahas cara membuat daftar isi otomatis di Blogger dengan langkah-langkah praktis.

---

## 1. Manfaat Daftar Isi di Blog

Daftar isi memiliki banyak keuntungan:

* Membuat artikel panjang lebih mudah dibaca

* Pengunjung bisa langsung menuju subtopik yang diinginkan

* Meningkatkan waktu kunjungan di blog (dwell time)

* Membantu SEO karena struktur heading lebih jelas bagi Google

---

## 2. Persiapan Artikel

Sebelum menambahkan daftar isi:

* Pastikan artikel menggunakan **heading H1, H2, H3** dengan benar

* Contoh struktur heading:

  * H1: Judul artikel (otomatis H1 di Blogger)

  * H2: Subjudul utama

  * H3: Sub-subjudul

Struktur heading yang rapi memudahkan TOC bekerja secara otomatis.

---

## 3. Menambahkan Kode Daftar Isi Otomatis

Untuk membuat TOC otomatis di Blogger:

1. Masuk ke dashboard Blogger → **Theme → Edit HTML**

2. Cari posisi di mana daftar isi ingin muncul (biasanya di atas postingan)

3. Tambahkan kode JavaScript dan CSS berikut:

```html

<style>

.toc {

    background: #f9f9f9;

    padding: 10px;

    border: 1px solid #ddd;

}

.toc ul {

    list-style-type: none;

    padding-left: 0;

}

.toc li {

    margin: 5px 0;

}

</style>

<div class="toc">

<strong>Daftar Isi</strong>

<div id="toc-content"></div>

</div>

<script>

document.addEventListener("DOMContentLoaded", function() {

    var toc = document.getElementById("toc-content");

    var headers = document.querySelectorAll("h2, h3");

    if(headers.length > 0) {

        var list = document.createElement("ul");

        headers.forEach(function(header) {

            var listItem = document.createElement("li");

            var link = document.createElement("a");

            var id = header.textContent.replace(/\s+/g, '-').toLowerCase();

            header.id = id;

            link.href = "#" + id;

            link.textContent = header.textContent;

            listItem.appendChild(link);

            list.appendChild(listItem);

        });

        toc.appendChild(list);

    }

});

</script>

```

4. Simpan perubahan dan buka artikel.

5. Daftar isi akan muncul otomatis berdasarkan subjudul H2 dan H3.

---

## 4. Tips Membuat Daftar Isi Efektif

* Gunakan **subjudul yang jelas dan singkat**

* Hindari terlalu banyak heading di satu artikel

* Beri **style yang kontras** agar daftar isi mudah terlihat

* Pastikan TOC **mobile-friendly** agar tampil baik di smartphone

---

## 5. Alternatif: Menggunakan Gadget atau Widget

Jika tidak ingin menambahkan kode manual:

* Gunakan gadget pihak ketiga seperti **Table of Contents Widget**

* Beberapa template Blogger premium sudah menyediakan fitur TOC otomatis

* Pastikan widget kompatibel dengan template dan mobile-friendly

---

## 6. Kesimpulan

Daftar isi otomatis membantu pengunjung menavigasi artikel panjang, meningkatkan user experience, dan mendukung SEO. Langkah utamanya:

1. Gunakan heading H2 dan H3 dengan benar

2. Tambahkan kode JavaScript dan CSS atau gunakan widget

3. Periksa tampilannya di desktop dan smartphone

4. Gunakan daftar isi di artikel panjang untuk memudahkan pembaca

Dengan TOC, blog terlihat lebih profesional dan pengunjung lebih betah membaca artikel sampai selesai.

---