Panduan Lengkap 2025: Cara Membuat Daftar Isi Otomatis di Blogger

Updated: 29 Jul, 2025 • 2 • min read

Table of Contents

Membuat Daftar Isi Otomatis di Blogger

Asik Belajar - Daftar isi atau Table of Contents (ToC) di sebuah blog sangat penting, terutama untuk artikel yang panjang. Selain memudahkan pembaca menjelajahi isi konten, daftar isi juga membantu meningkatkan struktur SEO dan pengalaman pengguna.

Bagi pengguna Blogger, kini tersedia berbagai cara modern untuk menambahkan daftar isi secara otomatis, baik secara manual dengan HTML & CSS, maupun melalui JavaScript.

Kenapa Perlu Menambahkan Daftar Isi di Blogger?

✅ Mempermudah navigasi dalam artikel panjang
✅ Meningkatkan pengalaman pengguna (UX)
✅ Meningkatkan peluang muncul di Featured Snippet Google
✅ Struktur konten lebih teratur dan profesional

Langkah demi Langkah Membuat Daftar Isi Otomatis di Blogger

Langkah 1: Masuk ke Dashboard Blogger

Kunjungi www.blogger.com dan login
Pilih blog yang ingin kamu edit

Langkah 2: Tambahkan Kode CSS (Opsional untuk Tampilan)

Buka menu Tema > Sesuaikan > Lanjutan > Tambahkan CSS atau melalui Edit HTML, lalu tambahkan:

.toc-container {
  background: #f8f8f8;
  padding: 15px;
  margin: 20px 0;
  border-left: 4px solid #ff5722;
  font-family: Arial, sans-serif;
}
.toc-container ul {
  list-style-type: none;
  padding-left: 0;
}
.toc-container li {
  margin-bottom: 5px;
}
.toc-container a {
  text-decoration: none;
  color: #333;
}
.toc-container a:hover {
  text-decoration: underline;
}

Langkah 3: Tambahkan Script JavaScript Otomatis (Versi 2025)

Cari bagian sebelum tag </body> dan tempelkan kode berikut:

<script>
document.addEventListener("DOMContentLoaded", function() {
  const headings = document.querySelectorAll("h2, h3");
  if (headings.length === 0) return;

  const toc = document.createElement("div");
  toc.className = "toc-container";
  toc.innerHTML = "<strong>Daftar Isi:</strong><ul></ul>";
  const ul = toc.querySelector("ul");

  headings.forEach((heading, index) => {
    const id = "toc-" + index;
    heading.setAttribute("id", id);

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

    if (heading.tagName === "H3") {
      li.style.marginLeft = "20px";
    }

    li.appendChild(link);
    ul.appendChild(li);
  });

  const postBody = document.querySelector(".post-body") || document.querySelector(".entry-content");
  if (postBody) postBody.insertBefore(toc, postBody.firstChild);
});
</script>

Langkah 4: Simpan dan Cek Hasilnya

Setelah semua kode ditambahkan, klik Simpan Tema, lalu buka salah satu artikel panjang kamu. Daftar isi otomatis akan muncul di bagian atas isi artikel dan akan menyesuaikan dengan struktur heading (H2 dan H3) yang kamu buat.

📌 Penjelasan: Daftar Isi Blogger Merupakan Gabungan dari CSS, HTML, dan JavaScript

Dalam implementasinya, daftar isi otomatis di Blogger bukan hanya soal menampilkan link ke bagian artikel. Agar bisa bekerja dengan baik dan tampil menarik, daftar isi ini merupakan hasil gabungan dari tiga elemen utama:

1. HTML → Struktur Dasar

HTML adalah tulang punggung dari daftar isi. Elemen seperti <div>, <ul>, <li>, dan <a> digunakan untuk:

Menampung daftar isi dalam wadah tertentu (<div class="toc-container">)
Menyusun daftar heading sebagai list (<ul> dan <li>)
Mengarahkan pembaca ke bagian tertentu dalam artikel (<a href="#judul-section">)

Contoh dasar HTML output dari daftar isi:

<div class="toc-container">
  <strong>Daftar Isi:</strong>
  <ul>
    <li><a href="#toc-0">Pendahuluan</a></li>
    <li><a href="#toc-1">Manfaat</a></li>
    <li style="margin-left:20px;"><a href="#toc-2">Detail Manfaat</a></li>
  </ul>
</div>

2. CSS → Gaya Tampilan

Agar tampilannya rapi, menarik, dan konsisten dengan desain blog kamu, digunakan kode CSS (Cascading Style Sheets). CSS bertugas mengatur:

Warna latar, padding, border
Jarak antar item
Warna dan gaya link
Efek hover saat mouse diarahkan

Tanpa CSS, daftar isi tetap muncul, tapi tampilannya akan sangat polos dan sulit dibaca.

3. JavaScript → Otomatisasi dan Dinamika

Inilah bagian yang membuat daftar isi menjadi otomatis. JavaScript:

Mendeteksi semua heading (seperti <h2> dan <h3>) di dalam artikel
Membuat ID unik untuk tiap heading (id="toc-0", dst)
Membangun elemen HTML daftar isi secara otomatis sesuai konten yang ditulis

Artinya, kamu tidak perlu menulis manual daftar isi tiap kali membuat artikel. JavaScript-lah yang membacanya secara real-time dan membuatnya tampil otomatis.

Daftar isi otomatis di Blogger = HTML (struktur) + CSS (tampilan) + JavaScript (fungsi otomatis)

Ketiga komponen ini saling melengkapi:

HTML menciptakan kerangka daftar isi
CSS mempercantik tampilannya
JavaScript mengisi isinya secara otomatis berdasarkan heading artikel

Dengan memanfaatkan kombinasi ini, kamu bisa membuat artikel panjang di blog jadi lebih mudah dijelajahi, terstruktur, dan profesional — tanpa harus repot menyusun daftar isi secara manual.

Berikut adalah kode gabungan lengkap (CSS + HTML + JavaScript) untuk membuat daftar isi otomatis yang menarik dan modern di platform Blogger (Blogspot) tahun 2025.

Kode ini bisa langsung kamu terapkan pada template Blogger atau langsung di bagian HTML tema blog kamu:

✅ 1. CSS: Tampilan Daftar Isi

Tambahkan ini di bagian Tema > Edit HTML, sebelum </head> atau di Tata Letak > Tambahkan CSS Tambahan:

.toc-container {
  background: #f9f9f9;
  border-left: 4px solid #ff5722;
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 8px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.toc-container strong {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
  color: #ff5722;
}

.toc-container ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-container li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.toc-container li a {
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}

.toc-container li a:hover {
  color: #ff5722;
}

.toc-container li.subheading {
  margin-left: 20px;
  font-size: 14px;
  color: #666;
}

✅ 2. JavaScript: Daftar Isi Otomatis

Letakkan tepat sebelum </body> di dalam tema Blogger:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const postBody = document.querySelector(".post-body") || document.querySelector(".entry-content");
  if (!postBody) return;

  const headings = postBody.querySelectorAll("h2, h3");
  if (headings.length === 0) return;

  const toc = document.createElement("div");
  toc.className = "toc-container";
  toc.innerHTML = "<strong>📑 Daftar Isi:</strong><ul></ul>";
  const ul = toc.querySelector("ul");

  headings.forEach((heading, index) => {
    const id = "toc-" + index;
    heading.setAttribute("id", id);

    const li = document.createElement("li");
    if (heading.tagName === "H3") li.classList.add("subheading");

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

    li.appendChild(link);
    ul.appendChild(li);
  });

  postBody.insertBefore(toc, postBody.firstChild);
});
</script>

✅ 3. HTML: Gunakan Heading yang Sesuai

Saat menulis artikel di editor Blogger, pastikan kamu menggunakan heading yang konsisten:

Gunakan <h2> untuk poin utama
Gunakan <h3> untuk sub-poin

Contoh di editor Blogger:

<h2>Pendahuluan</h2>
<h2>Manfaat Daftar Isi</h2>
<h3>Memudahkan Pembaca</h3>
<h3>Meningkatkan SEO</h3>
<h2>Cara Memasang di Blogger</h2>

📌 Hasil:

Kotak daftar isi akan tampil otomatis di atas isi artikel
Heading <h2> tampil sebagai poin utama
Heading <h3> tampil menjorok ke kanan sebagai subjudul
Tampilan bersih, modern, responsif, dan SEO-friendly

Jika kamu ingin membuatnya collapse/expand atau menambah fitur scroll to top, saya bisa bantu tambahkan juga! Cukup beri tahu ya.

Tips Tambahan

Gunakan heading (H2, H3) secara konsisten dan berurutan
Hindari penggunaan H1 dalam isi artikel karena itu digunakan untuk judul utama
Uji hasilnya di perangkat mobile agar tidak mengganggu tampilan

Alternatif: Gunakan Plugin Pihak Ketiga (Jika Perlu)

Jika kamu menginginkan daftar isi lebih interaktif (expand/collapse, animasi), kamu bisa gunakan layanan atau script seperti:

TOCify
TOC generator dari CDN seperti jsDelivr atau unpkg (untuk pengguna tingkat lanjut)

Membuat daftar isi di Blogger di tahun 2025 kini jauh lebih mudah berkat penggunaan JavaScript modern. Dengan mengikuti langkah-langkah di atas, kamu bisa menyajikan konten yang lebih rapi, ramah pembaca, dan berpotensi lebih disukai mesin pencari Google.

Jika kamu menggunakan template pihak ketiga (seperti Fletro, Median UI, atau Igniplex), pastikan untuk menguji kode agar tidak konflik dengan elemen blog lainnya.

Asik belajar blog