Membuat Table of Content Otomatis di Posting Blogger

Juli 23, 2026 • Oleh Achmad Jauhari
Membuat Table of Content Otomatis di Posting Blogger


Saat membaca artikel yang panjang, pengunjung biasanya ingin langsung menuju bagian yang mereka butuhkan tanpa harus menggulir halaman dari atas hingga bawah. Oleh karena itu, penggunaan Table of Content (TOC) atau Daftar Isi menjadi salah satu fitur yang sangat penting pada sebuah blog.

Selain memberikan pengalaman pengguna (User Experience/UX) yang lebih baik, Table of Content juga dapat membantu mesin pencari memahami struktur artikel. Tidak heran jika banyak blog yang sudah menerapkan fitur ini, terutama blog yang memiliki artikel dengan panjang lebih dari 1.500 kata.

Pada tutorial kali ini, kita akan membahas cara membuat Table of Content di posting Blogger secara otomatis menggunakan HTML, CSS, dan JavaScript. Cara ini cukup ringan, responsif, serta kompatibel dengan hampir semua template Blogger.

Daftar Isi

Memuat daftar isi...

Apa Itu Table of Content?

Table of Content (TOC) adalah daftar isi yang menampilkan seluruh subjudul (Heading) yang terdapat di dalam artikel. Pengunjung cukup mengklik salah satu judul pada daftar isi tersebut, kemudian halaman akan langsung berpindah ke bagian yang dipilih.

Contoh struktur TOC:

  • Pendahuluan
  • Apa Itu Table of Content
  • Manfaat TOC
  • Cara Memasang TOC
  • Hasil Akhir
  • Penutup

Manfaat Menggunakan Table of Content

1. Memudahkan Pengunjung

Pembaca dapat langsung menuju informasi yang diinginkan tanpa harus menggulir artikel secara manual.

2. Meningkatkan User Experience

Navigasi artikel menjadi lebih nyaman sehingga pengunjung cenderung bertahan lebih lama di blog Anda.

3. Membantu SEO

Google lebih mudah memahami struktur artikel karena penggunaan heading yang lebih teratur.

4. Membuat Artikel Lebih Profesional

Blog akan terlihat lebih rapi dan modern sehingga meningkatkan kepercayaan pembaca.

Persiapan Sebelum Memasang TOC

Sebelum memasang Table of Content, pastikan artikel Anda menggunakan struktur heading yang benar.

Contohnya:

  • Heading (H2) untuk judul utama pembahasan.
  • Sub Heading (H3) untuk sub pembahasan.
  • Minor Heading (H4) jika diperlukan.

Semakin rapi penggunaan heading, semakin baik hasil TOC yang ditampilkan.

Cara Membuat Table of Content di Blogger

Langkah 1. Masuk ke Dashboard Blogger

Login ke akun Blogger Anda.

Kemudian buka menu:

Tema → Edit HTML

Langkah 2. Tambahkan CSS

Cari kode:

]]></b:skin> atau </style>

Lalu letakkan kode CSS berikut di atasnya.

/* Styling Table of Contents */
.toc-container {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.toc-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toc-list {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.toc-list li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.toc-list ul {
  list-style-type: circle;
  margin-top: 0.3rem;
  margin-bottom: 0;
}

.toc-list a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s ease;
}

.toc-list a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

Simpan template.

Langkah 3. Tambahkan JavaScript

Cari kode:

</body>

Lalu letakkan script berikut tepat di atasnya.

<script>
document.addEventListener("DOMContentLoaded", function() {
  const articleContainer = document.querySelector(".post-content") || document.querySelector("article") || document.body;
  const tocContainer = document.getElementById("toc-content");
  
  // Ambil semua heading h2 dan h3 di dalam area konten artikel
  const headings = articleContainer.querySelectorAll("h2, h3");
  
  if (headings.length === 0) {
    const tocBox = document.getElementById("table-of-contents");
    if (tocBox) tocBox.style.display = "none";
    return;
  }

  let tocListHtml = '<ul class="toc-list">';
  let currentLevel = 2;
  let firstItem = true;

  headings.forEach((heading, index) => {
    // Berikan id unik pada heading jika belum ada
    if (!heading.id) {
      heading.id = "heading-" + index;
    }

    const tagName = heading.tagName.toLowerCase();
    const level = parseInt(tagName.replace("h", ""));
    const text = heading.textContent;
    const id = heading.id;

    if (level === 2) {
      if (!firstItem) {
        tocListHtml += '</li>';
      }
      tocListHtml += `<li><a href="#${id}">${text}</a>`;
      currentLevel = 2;
      firstItem = false;
    } else if (level === 3) {
      if (currentLevel === 2) {
        tocListHtml += '<ul>';
      }
      tocListHtml += `<li><a href="#${id}">${text}</a></li>`;
      currentLevel = 3;
    }
  });

  if (!firstItem) {
    if (currentLevel === 3) {
      tocListHtml += '</ul></li>';
    } else {
      tocListHtml += '</li>';
    }
  }

  tocListHtml += '</ul>';
  tocContainer.innerHTML = tocListHtml;
});
</script>

Simpan template kembali.

Langkah 4. Gunakan Heading pada Artikel

Saat membuat artikel baru, gunakan Heading seperti berikut.

H2
H3
H2
H3
H3
H2

Script akan secara otomatis membuat daftar isi berdasarkan heading tersebut.

Langkah 5. Menyisipkan kode HTML pada postingan.

Saat membuat postingan, silahkan anda pindah ke mode penulisan HTML dan sisipkan kode berikut didalamnya.

<!-- Table of Contents Container -->
<div id="table-of-contents" class="toc-container">
  <div class="toc-title">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20" height="20">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
    </svg>
    Daftar Isi
  </div>
  <div id="toc-content">
    <p class="text-sm text-gray-500">Memuat daftar isi...</p>
  </div>
</div>

Untuk penempatan yang baik dapat anda letakkan diatas h2 pertama atau setelah kata pengantar agar pembaca dapat kesempatan untuk memahami isi dari postingan.

Hasil Akhir

Setelah semua langkah selesai, daftar isi akan muncul secara otomatis di bagian atas artikel.

Contoh tampilannya:

Daftar Isi

• Pendahuluan
• Pengertian TOC
• Manfaat TOC
• Cara Memasang
• Penutup

Saat salah satu judul diklik, halaman akan langsung menuju bagian tersebut.

Tips Agar TOC Lebih SEO Friendly

Agar hasil yang diperoleh lebih maksimal, berikut beberapa tips yang dapat Anda terapkan.

  • Gunakan minimal lima heading dalam setiap artikel.
  • Hindari penggunaan heading secara berlebihan.
  • Pastikan urutan heading dimulai dari H2 kemudian H3.
  • Jangan menggunakan Heading hanya untuk memperbesar ukuran tulisan.
  • Buat judul heading yang jelas dan mengandung kata kunci.

Kelebihan Script Ini

  • Ringan dan cepat dimuat.
  • Tidak memerlukan library tambahan seperti jQuery.
  • Responsif pada perangkat desktop maupun smartphone.
  • Otomatis membaca seluruh heading artikel.
  • Cocok digunakan pada hampir semua template Blogger.
  • Mudah dimodifikasi sesuai kebutuhan.

Kesimpulan

Menambahkan Table of Content di posting Blogger merupakan salah satu cara sederhana untuk meningkatkan kualitas artikel. Selain memudahkan pembaca dalam menavigasi isi artikel, fitur ini juga membantu memperjelas struktur konten sehingga lebih mudah dipahami oleh mesin pencari.

Jika blog Anda sering menerbitkan artikel panjang, penggunaan TOC sangat direkomendasikan karena dapat meningkatkan pengalaman pengguna, memperpanjang waktu kunjungan, dan mendukung optimasi SEO. Dengan mengikuti langkah-langkah di atas, Anda sudah dapat membuat daftar isi otomatis yang ringan, responsif, dan mudah diterapkan pada template Blogger apa pun.

Semoga tutorial ini bermanfaat dan selamat mencoba.

Tag: blogger
Bagikan:

Artikel Terkait

← Artikel Sebelumnya Artikel Selanjutnya →