Cara Lengkap Membuat Daftar Isi Otomatis Modern & Menarik di dalam Artikel Blogger

Table of Contents

Daftar isi otomatis (table of contents/TOC) sangat membantu pembaca menavigasi artikel panjang. Selain itu, TOC juga meningkatkan struktur SEO karena membuat artikel lebih mudah dibaca oleh mesin pencari. 

Di artikel ini, kamu akan belajar membuat daftar isi otomatis di Blogger dengan tampilan yang modern, responsif, dan menarik.

Berikut adalah artikel lengkap mengenai cara membuat Daftar Isi Otomatis yang modern dan menarik untuk Blogger:

---

✨ Fitur TOC yang Akan Dibuat:

• Otomatis muncul dari tag heading (<h2>, <h3>, dst.)

• Bisa di-toggle (tampil/sembunyi)

• Desain flat & responsif

• Cocok untuk template Blogger apapun

---

🔧 Langkah 1: Tambahkan CSS Desain Daftar Isi

Masuk ke Tema → Edit HTML, lalu tambahkan kode CSS berikut di atas </head>:

<style>
.toc-container {
  border: 1px solid #ddd;
  background: #f9f9f9;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 10px;
  font-family: sans-serif;
}

.toc-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.toc-content {
  display: none;
  margin-top: 10px;
}

.toc-content ul {
  list-style: none;
  padding-left: 15px;
}

.toc-content ul li {
  margin: 5px 0;
}

.toc-content a {
  text-decoration: none;
  color: #0066cc;
}

.toc-content a:hover {
  text-decoration: underline;
}
</style>

---

🧩 Langkah 2: Tambahkan JavaScript Otomatisasi & Toggle

Tempelkan script ini sebelum </body>:

<script>
document.addEventListener("DOMContentLoaded", function() {
  const postContent = document.querySelector('.post-body');
  const headings = postContent.querySelectorAll("h2, h3");
  if (headings.length < 2) return;

  let tocHTML = '<div class="toc-container">';
  tocHTML += '<div class="toc-title" onclick="toggleTOC()">Daftar Isi ▼</div>';
  tocHTML += '<div class="toc-content"><ul>';

  headings.forEach((heading, index) => {
    const id = "toc-" + index;
    heading.setAttribute("id", id);
    tocHTML += `<li><a href="#${id}">${heading.textContent}</a></li>`;
  });

  tocHTML += '</ul></div></div>';
  postContent.insertAdjacentHTML("afterbegin", tocHTML);
});

function toggleTOC() {
  const content = document.querySelector('.toc-content');
  if (content.style.display === "none" || content.style.display === "") {
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
}
</script>

---

✍️ Langkah 3: Tempatkan TOC di Konten Artikel

Dengan skrip ini, daftar isi akan otomatis muncul di bagian paling atas artikel. Kamu tidak perlu menambahkan kode secara manual di setiap postingan.

---

📱 Responsif di Mobile?

Sudah! Desainnya akan menyesuaikan ukuran layar. Namun, kamu bisa menyesuaikan tampilannya dengan media query seperti:

@media (max-width: 600px) {
  .toc-container {
    font-size: 14px;
    padding: 10px;
  }
}

---

🎨 Tips Tambahan: Sesuaikan Warna Sesuai Blog Kamu

Gunakan color generator dari blog kamu untuk menyesuaikan warna:

🔗 Gunakan Color Generator – AdinJava

Contoh ubah warna link:

.toc-content a {
  color: #3b82f6; /* Ganti dengan kode HEX dari blog kamu */
}

---

✅ Kesimpulan

Dengan daftar isi otomatis yang modern, kamu:

• Membantu pembaca memahami struktur artikel

• Meningkatkan navigasi halaman

• Meningkatkan nilai SEO dan pengalaman pengguna