Cara Membuat Table of Contents (ToC) Otomatis dengan JavaScript di Blog

23 Feb, 2026

Pada tutorial ini kita akan membuat Table of Contents (TOC) otomatis menggunakan CSS dan JavaScript. TOC akan membaca semua heading (h1–h4) dalam artikel dan menampilkannya dalam daftar navigasi.

1. Script CSS Table of Contents

Cara Membuat Table of Contents (ToC) Otomatis dengan JavaScript di Blog


Letakkan kode berikut sebelum tag </head> pada template Blogger.

<style>

/* Container utama TOC */
#toc-widget {
  margin: 20px 0;
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border-left: 4px solid #0ea5e9;
}

/* Bagian header TOC (judul + tombol) */
#toc-widget .toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* Judul TOC */
#toc-widget h3 {
  margin: 0;
  font-size: 18px;
  color: #0ea5e9;
}

/* Tombol collapse / expand */
#toc-toggle {
  font-size: 14px;
  background: #e0f2fe;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: #0369a1;
  transition: 0.3s;
}

/* Efek hover tombol */
#toc-toggle:hover {
  background: #0ea5e9;
  color: #fff;
}

/* Area isi daftar */
#toc-content {
  margin-top: 15px;
  transition: all 0.3s ease;
}

/* Style list utama */
#toc-widget ul {
  padding-left: 20px;
  list-style-type: disc;
}

/* Sub list */
#toc-widget ul ul {
  list-style-type: circle;
}

/* Sub-sub list */
#toc-widget ul ul ul {
  list-style-type: square;
}

/* Spasi antar item */
#toc-widget li {
  margin: 6px 0;
}

/* Link heading */
#toc-widget a {
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  transition: 0.2s;
}

/* Efek hover link */
#toc-widget a:hover {
  color: #0ea5e9;
  padding-left: 4px;
}

/* Class untuk menyembunyikan TOC */
.toc-collapsed {
  display: none;
}

</style>

Penjelasan CSS

  • #toc-widget → Container utama TOC.
  • .toc-header → Mengatur posisi judul dan tombol agar sejajar.
  • #toc-toggle → Tombol untuk menyembunyikan/menampilkan TOC.
  • ul ul → Mengatur tampilan sub-heading (h2, h3, h4).
  • .toc-collapsed → Digunakan JavaScript untuk hide/show daftar isi.

2. Script JavaScript TOC Otomatis

Letakkan script berikut sebelum tag </body>.

<script>

window.addEventListener("load", function() {

  /* Mencari container artikel */
  const content =
    document.querySelector(".post-body") ||
    document.querySelector(".entry-content") ||
    document.querySelector("article");

  if (!content) return;

  /* Mengambil h1 pertama sebagai posisi penempatan TOC */
  const firstH1 = content.querySelector("h1");
  if (!firstH1) return;

  /* Mengambil semua heading */
  const headings = content.querySelectorAll("h1, h2, h3, h4");
  if (headings.length < 2) return;

  /* Membuat container TOC */
  const tocContainer = document.createElement("div");
  tocContainer.id = "toc-widget";
  tocContainer.innerHTML = `
    <div class="toc-header">
      <h3>Table of Contents</h3>
      <button id="toc-toggle"> - </button>
    </div>
    <div id="toc-content">
      <ul id="toc-list"></ul>
    </div>
  `;

  /* Menempatkan TOC setelah h1 pertama */
  firstH1.insertAdjacentElement("afterend", tocContainer);

  const tocList = document.getElementById("toc-list");
  const toggleBtn = document.getElementById("toc-toggle");
  const tocContent = document.getElementById("toc-content");

  let levelStack = [tocList];
  let lastLevel = 1;
  let counter = 0;

  /* Loop setiap heading */
  headings.forEach(function(heading) {

    let level = parseInt(heading.tagName.substring(1));

    /* Membuat ID otomatis jika belum ada */
    if (!heading.id) {
      heading.id = "toc-heading-" + counter++;
    }

    const li = document.createElement("li");
    const a = document.createElement("a");
    a.href = "#" + heading.id;
    a.textContent = heading.textContent;

    li.appendChild(a);

    /* Membuat struktur nested berdasarkan level */
    if (level > lastLevel) {
      const newUl = document.createElement("ul");
      levelStack[levelStack.length - 1].lastElementChild.appendChild(newUl);
      levelStack.push(newUl);
    } 
    else if (level < lastLevel) {
      levelStack.splice(level - 1);
    }

    levelStack[levelStack.length - 1].appendChild(li);
    lastLevel = level;
  });

  /* Fitur Collapse / Expand */
  toggleBtn.addEventListener("click", function() {
    tocContent.classList.toggle("toc-collapsed");
    toggleBtn.textContent =
      tocContent.classList.contains("toc-collapsed")
      ? "+"
      : "-";
  });

});

</script>

Penjelasan JavaScript

  • window.addEventListener("load") → Script dijalankan setelah halaman selesai dimuat.
  • querySelector() → Mencari area artikel agar tidak mengambil heading dari sidebar.
  • querySelectorAll("h1, h2, h3, h4") → Mengambil semua heading.
  • heading.id → Memberikan ID otomatis agar bisa ditautkan.
  • levelStack → Mengatur struktur nested sesuai level heading.
  • toggleBtn.addEventListener → Mengaktifkan tombol sembunyikan/tampilkan TOC.

Kesimpulan

Script ini akan:

  • Membaca semua heading otomatis
  • Membuat daftar isi bertingkat
  • Menempatkan TOC setelah h1 pertama
  • Menyediakan tombol collapse & expand
  • Tidak membutuhkan plugin tambahan

Sekarang blog Anda sudah memiliki Table of Contents otomatis yang ringan dan SEO-friendly 

Previous Post