Cara Membuat Daftar Isi Otomatis (TOC) di Artikel Blogspot + Tombol Buka Tutup

[Show]

Menambahkan Daftar Isi (Table of Contents / TOC) pada artikel di Blogspot sangat membantu pembaca untuk menavigasi bagian-bagian penting, terutama jika artikel kamu cukup panjang atau berisi banyak subjudul. Selain itu, TOC juga dapat membantu SEO karena menambah struktur yang jelas pada halaman. Untuk melihat contoh daftra isi TOC ini dapat dilihat diatas artikel ini adalah contohnya.

Pada panduan ini, kamu akan belajar:

Cara menambahkan TOC otomatis ke artikel.
Menyertakan tombol "Buka/Tutup" untuk tampilan lebih rapi.
Menghindari agar TOC tidak menampilkan menu atau gadget lain.
Penjelasan apakah cara ini bisa diterapkan di WordPress.

✅ Langkah-langkah Membuat TOC Otomatis di Artikel Blogspot

1. Gunakan Heading Tag yang Benar

Untuk membentuk struktur artikel, gunakan tag heading seperti:

<h2> untuk bagian utama
<h3> untuk subbagian (opsional)

Contoh:

<h2>1. Pendahuluan</h2>
<h3>1.1 Tujuan</h3>
<h2>2. Langkah-langkah</h2>

Gunakan editor Blogspot dalam mode HTML, bukan mode Compose.

2. Tempelkan Script TOC Berikut di Awal Artikel

Salin dan tempel kode ini di awal artikel kamu (mode HTML):

<style>
#toc {
  background: #f9f9f9;
  padding: 10px 10px 5px 10px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  position: relative;
}
#toc h3 {
  margin-top: 0;
  display: inline;
}
#toc-toggle {
  float: right;
  background: #eee;
  border: 1px solid #ccc;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
#toc ul {
  list-style: none;
  padding-left: 10px;
  margin-top: 10px;
}
#toc ul li {
  margin: 5px 0;
}
</style>

<div id="toc">
  <h3>Daftar Isi</h3>
  <span id="toc-toggle">Tutup</span>
  <ul id="toc-list"></ul>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  var tocList = document.getElementById("toc-list");
  var tocToggle = document.getElementById("toc-toggle");
  var article = document.querySelector(".post-body");
  if (!article) return;

  var headings = article.querySelectorAll("h2, h3");
  var count = 0;

  headings.forEach(function(heading) {
    if (heading.id === "") {
      heading.id = "toc" + count;
      count++;
    }

    var li = document.createElement("li");
    if (heading.tagName === "H3") {
      li.style.marginLeft = "15px";
    }

    var link = document.createElement("a");
    link.href = "#" + heading.id;
    link.textContent = heading.textContent;
    li.appendChild(link);
    tocList.appendChild(li);
  });

  // Toggle buka/tutup
  tocToggle.addEventListener("click", function() {
    if (tocList.style.display === "none") {
      tocList.style.display = "block";
      tocToggle.textContent = "Tutup";
    } else {
      tocList.style.display = "none";
      tocToggle.textContent = "Buka";
    }
  });
});
</script>

🔒 Agar Tidak Ikut Menampilkan Menu/Gadget

Secara default, script akan mencari semua <h2> dan <h3> di halaman, termasuk dari menu atau gadget. Maka kita batasi pencarian heading hanya dalam area artikel dengan class .post-body.

Jika tema blog kamu menggunakan class lain seperti .entry-content atau .post-content, cukup ganti bagian ini:

var article = document.querySelector(".post-body");

Menjadi:

var article = document.querySelector(".entry-content"); // Contoh lain

✅ Hasil yang Didapat:

TOC tampil di awal artikel.
Daftar otomatis mengikuti heading yang kamu gunakan.
Ada tombol "Tutup" untuk menyembunyikan TOC dan tombol "Buka" untuk menampilkannya lagi.

❓ Apakah Cara Ini Bisa Dipakai di WordPress?

Jawabannya: BISA, tapi dengan penyesuaian.

Perbedaan utamanya:

WordPress menggunakan editor block (Gutenberg), sehingga kamu harus menambahkan kode HTML/JS dalam block HTML.
Class pembungkus artikel di WordPress biasanya berbeda, contohnya .entry-content.
Beberapa tema WordPress membatasi eksekusi JavaScript dalam artikel, jadi TOC tidak selalu berjalan tanpa menaruh JS di tempat lain (misalnya header/footer template).

Alternatif untuk WordPress:

Gunakan plugin seperti Easy Table of Contents, LuckyWP TOC, dll. yang jauh lebih praktis dan fleksibel.

🎁 Kesimpulan

Menambahkan TOC pada artikel Blogspot:

Meningkatkan navigasi dan kenyamanan pembaca.
Mudah dipasang hanya dengan script sederhana.
Sudah dilengkapi tombol buka/tutup agar lebih rapi.

Jika kamu pengguna WordPress, kamu bisa menerapkan versi yang sama dengan beberapa penyesuaian, atau menggunakan plugin yang sudah tersedia.

Jika kamu ingin versi TOC yang terlipat saat pertama kali dibuka, atau ingin tampil hanya jika ada minimal 3 heading, saya juga bisa bantu buatkan. Tertarik untuk versi lanjutan ini? kirim komentarnya di bawah ya dan share artikelnya, trims.