Script Membuat Daftar Isi (Table of Contents) Otomatis dan Sangat SEO Friendly

4/07/2026
Cara membuat daftar isi otomatis di Blogger dengan HTML CSS dan JavaScript

Pernahkah Anda membuka artikel Blogger yang sangat panjang tetapi kesulitan menemukan bagian yang ingin dibaca? Kondisi seperti ini dapat membuat pembaca harus menggulir halaman berkali-kali sebelum menemukan informasi yang mereka cari.

Salah satu solusi yang dapat diterapkan adalah membuat daftar isi otomatis di Blogger. Dengan bantuan HTML, CSS, dan JavaScript, daftar isi dapat membaca heading seperti H2 dan H3 yang terdapat di dalam artikel, kemudian mengubahnya menjadi navigasi yang dapat diklik.

Ketika salah satu item daftar isi dipilih, halaman akan langsung menuju bagian artikel yang sesuai tanpa perlu memuat ulang halaman. Selain membuat artikel panjang lebih mudah dinavigasi, struktur seperti ini juga membantu pembaca memahami susunan topik yang dibahas.

Apa Itu Daftar Isi Otomatis di Blogger?

Daftar isi otomatis atau Table of Contents (TOC) adalah sebuah navigasi yang menampilkan daftar subjudul dari sebuah artikel. Pada tutorial ini, sistem dibuat menggunakan kombinasi HTML, CSS, dan JavaScript.

JavaScript akan membaca elemen heading yang terdapat di area konten postingan, khususnya H2 dan H3. Setiap heading kemudian diberi ID secara otomatis dan dibuat menjadi tautan yang dapat diklik.

Dengan pendekatan tersebut, Anda tidak perlu membuat daftar isi secara manual setiap kali menulis artikel. Selama artikel memiliki struktur heading yang benar, daftar isi dapat dibuat secara otomatis berdasarkan subjudul yang tersedia.

Mengapa Daftar Isi Penting untuk Artikel Blogger?

Daftar isi sangat berguna terutama untuk artikel yang memiliki banyak bagian dan pembahasan. Pengunjung dapat melihat gambaran isi artikel sebelum menentukan bagian mana yang ingin mereka baca terlebih dahulu.

Beberapa manfaat penerapan daftar isi otomatis antara lain:

  • Mempermudah navigasi artikel sehingga pembaca dapat langsung menuju bagian tertentu.
  • Membuat artikel panjang lebih terstruktur dan mudah dipahami.
  • Meningkatkan pengalaman pengguna karena informasi dapat ditemukan dengan lebih cepat.
  • Membantu memperjelas hierarki konten melalui penggunaan heading H2 dan H3.
  • Menghemat waktu penulis karena daftar isi dapat dibuat berdasarkan heading secara otomatis.
  • Cocok untuk tutorial dan artikel panduan yang memiliki banyak subtopik.

Daftar isi bukan jaminan artikel mendapatkan posisi tertentu di Google. Namun, struktur konten yang jelas dan navigasi yang baik dapat membantu menciptakan pengalaman membaca yang lebih nyaman.

Contoh Penggunaan Daftar Isi Otomatis

Misalnya Anda membuat artikel panduan wisata yang membahas beberapa lokasi, rute perjalanan, biaya, rekomendasi tempat makan, dan tips perjalanan.

Tanpa daftar isi, pembaca harus menggulir halaman untuk mencari bagian tertentu. Dengan daftar isi, seluruh subjudul dapat ditampilkan dalam satu kotak navigasi.

Jika pembaca ingin langsung menuju bagian “Tips Perjalanan”, mereka cukup mengklik bagian tersebut. Browser kemudian akan mengarahkan halaman ke heading yang sesuai.

Kode Daftar Isi Otomatis Blogger Siap Pakai

Kode berikut terdiri dari dua bagian utama, yaitu CSS untuk tampilan daftar isi dan HTML serta JavaScript untuk membuat navigasi otomatis.

Anda dapat menggunakan kode tersebut langsung pada postingan Blogger melalui mode HTML.

1. Kode CSS Daftar Isi

CSS berikut digunakan untuk mengatur tampilan kotak daftar isi, jarak antaritem, warna tautan, serta tampilan berbeda antara heading H2 dan H3.


<style>
.toc-container {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  font-family: inherit;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.toc-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.toc-h2 {
  color: #0056b3;
  font-weight: 600;
  margin-top: 8px;
  display: block;
  text-decoration: none;
  padding: 5px 0;
  transition: all 0.3s ease;
}

.toc-h3 {
  color: #495057;
  margin-top: 4px;
  display: block;
  text-decoration: none;
  padding: 5px 0 5px 15px;
  font-size: 0.95em;
  transition: all 0.3s ease;
}

.toc-container a:hover {
  color: #dc3545;
  padding-left: 5px;
}

.toc-h3:hover {
  padding-left: 20px;
}
</style>

2. Kode HTML dan JavaScript Daftar Isi

Bagian berikut merupakan fungsi utama daftar isi. JavaScript akan mencari heading H2 dan H3 pada area konten postingan Blogger dan membuat daftar tautan secara otomatis.


<div class="toc-container" id="toc-container">
  <span class="toc-title">Daftar Isi</span>
  <div id="toc-content"></div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  var postContent = document.querySelector('.post-body') || document.body;
  var headings = postContent.querySelectorAll('h2, h3');
  var tocContent = document.getElementById('toc-content');

  if (headings.length > 0 && tocContent) {

    for (var i = 0; i < headings.length; i++) {
      var heading = headings[i];

      var headingId = heading.id || 'toc-head-' + i;
      heading.id = headingId;

      var link = document.createElement('a');

      link.href = '#' + headingId;
      link.innerText = heading.innerText || heading.textContent;

      link.className =
        heading.tagName.toLowerCase() === 'h3'
          ? 'toc-h3'
          : 'toc-h2';

      tocContent.appendChild(link);
    }

  } else {

    var tocContainer = document.getElementById('toc-container');

    if (tocContainer) {
      tocContainer.style.display = 'none';
    }

  }
});
</script>

Cara Memasang Daftar Isi Otomatis di Blogger

Setelah memahami kode yang digunakan, berikut langkah pemasangannya pada artikel Blogger.

Langkah 1: Buka Blogger

Masuk ke dashboard Blogger, kemudian pilih blog yang ingin Anda gunakan. Setelah itu, buat postingan baru atau buka artikel yang ingin ditambahkan daftar isi.

Langkah 2: Gunakan Struktur Heading

Sebelum memasang script, pastikan artikel memiliki struktur heading yang jelas.

Gunakan H2 untuk subtopik utama dan H3 untuk pembahasan yang berada di bawah H2. Struktur sederhana yang dapat digunakan misalnya:


<h2>Apa Itu Blogger?</h2>

<h2>Cara Membuat Blog</h2>

<h3>Membuat Akun Blogger</h3>

<h3>Memilih Nama Blog</h3>

<h2>Cara Mengoptimalkan Blog</h2>

Hindari membuat heading hanya dengan memperbesar atau menebalkan teks. Gunakan format heading yang sebenarnya agar struktur artikel tetap jelas.

Langkah 3: Masuk ke Tampilan HTML

Pada editor postingan Blogger, pilih Tampilan HTML. Mode ini memungkinkan Anda memasukkan kode HTML, CSS, dan JavaScript secara langsung.

Langkah 4: Tentukan Posisi Daftar Isi

Posisi yang umum digunakan adalah setelah paragraf pembuka artikel atau sebelum pembahasan utama. Dengan demikian, pembaca dapat melihat navigasi setelah memahami konteks awal artikel.

Langkah 5: Tempelkan Kode

Tempelkan kode CSS, kemudian kode HTML dan JavaScript pada posisi yang telah ditentukan. Pastikan seluruh kode ditempelkan secara lengkap.

Langkah 6: Simpan dan Pratinjau

Setelah kode selesai ditempelkan, gunakan fitur Pratinjau Blogger untuk memastikan daftar isi muncul dan semua tautannya bekerja dengan benar.

Cara Kerja Script Daftar Isi Otomatis

Script ini bekerja melalui beberapa tahapan sederhana.

  1. Browser menunggu sampai struktur halaman selesai dimuat.
  2. JavaScript mencari area konten dengan selector .post-body.
  3. Script mencari semua elemen H2 dan H3.
  4. Setiap heading diberi ID apabila belum memiliki ID.
  5. Script membuat elemen tautan berdasarkan teks heading.
  6. Tautan dimasukkan ke dalam kotak daftar isi.
  7. Ketika tautan diklik, browser menuju ID heading yang sesuai.

Jika artikel tidak memiliki H2 atau H3, kode akan menyembunyikan kotak daftar isi sehingga tidak menampilkan kotak kosong.

Mengapa Heading H2 dan H3 Harus Digunakan?

Heading membantu membagi artikel menjadi beberapa bagian yang lebih mudah dipahami. Selain berguna bagi pembaca, struktur heading juga memberikan konteks mengenai hubungan antara berbagai bagian konten.

Contohnya, H2 dapat digunakan sebagai topik utama, sedangkan H3 digunakan sebagai subtopik di bawahnya.

Struktur tersebut jauh lebih baik daripada menggunakan teks tebal secara acak untuk setiap subjudul.

Cara Menempatkan Daftar Isi di Artikel Panjang

Untuk artikel yang panjang, daftar isi sebaiknya ditempatkan pada area yang mudah ditemukan tetapi tidak mengganggu paragraf pembuka.

Anda dapat menggunakan struktur seperti berikut:


<h1>Judul Artikel</h1>

<p>Paragraf pembuka artikel...</p>

<p>Penjelasan singkat mengenai topik...</p>

<!-- Daftar Isi di sini -->

<div class="toc-container" id="toc-container">
  ...
</div>

<h2>Pembahasan Pertama</h2>

<p>Isi pembahasan...</p>

Dengan susunan seperti ini, pengunjung dapat membaca pengantar terlebih dahulu sebelum melihat daftar navigasi.

Cara Menguji Daftar Isi Blogger

Setelah script dipasang, jangan langsung menerbitkan artikel sebelum melakukan pengujian. Gunakan fitur Pratinjau Blogger terlebih dahulu.

Periksa apakah kotak Daftar Isi muncul pada posisi yang diinginkan. Kemudian klik beberapa item di dalamnya.

Setiap tautan seharusnya mengarahkan Anda ke heading yang sesuai. Periksa juga artikel menggunakan perangkat mobile untuk memastikan tampilan daftar isi tetap nyaman digunakan.

Masalah Umum dan Cara Mengatasinya

Daftar Isi Tidak Muncul

Jika daftar isi tidak muncul, periksa apakah artikel memiliki elemen H2 atau H3. Script hanya akan membuat daftar ketika heading tersebut ditemukan.

Judul Tidak Masuk ke Daftar Isi

Pastikan judul subbagian menggunakan heading HTML yang benar. Teks yang hanya dibuat tebal menggunakan Bold tidak akan dianggap sebagai H2 atau H3 oleh script.

Script Tidak Berfungsi

Pastikan seluruh bagian JavaScript ditempelkan dengan lengkap. Periksa juga apakah template Blogger menggunakan struktur konten yang berbeda dari selector .post-body.

Daftar Isi Muncul Kosong

Daftar isi kosong biasanya terjadi ketika script tidak menemukan heading yang sesuai. Periksa kembali struktur artikel dan pastikan heading dibuat menggunakan H2 atau H3.

Tips Membuat Artikel Blogger Lebih Terstruktur

Daftar isi akan bekerja lebih baik jika artikel memiliki struktur yang konsisten. Beberapa hal yang dapat Anda terapkan antara lain:

  • Gunakan satu H1 sebagai judul utama artikel.
  • Gunakan H2 untuk pembahasan utama.
  • Gunakan H3 untuk subpembahasan yang masih berkaitan dengan H2.
  • Gunakan paragraf yang relatif ringkas dan mudah dipindai.
  • Gunakan bullet list untuk informasi yang dapat disajikan dalam bentuk daftar.
  • Gunakan gambar yang relevan dan memiliki alt text deskriptif.
  • Pastikan daftar isi tidak menutupi konten utama pada perangkat mobile.

Apakah Daftar Isi Blogger Membantu SEO?

Daftar isi bukan faktor yang secara otomatis membuat sebuah artikel mendapatkan peringkat tinggi di mesin pencari. Namun, navigasi yang baik dapat membantu pembaca menemukan informasi dengan lebih mudah dan membuat struktur artikel menjadi lebih jelas.

Selain itu, heading yang tersusun secara logis dapat membantu memberikan struktur pada konten. Dalam beberapa kondisi, mesin pencari juga dapat menampilkan tautan menuju bagian tertentu dari halaman, tetapi kemunculan fitur tersebut tidak dapat dijamin hanya dengan memasang daftar isi.

Karena itu, gunakan daftar isi terutama untuk meningkatkan navigasi dan pengalaman pengguna, kemudian kombinasikan dengan konten yang relevan, informatif, dan memiliki struktur yang baik.

Apakah Script Ini Membutuhkan Plugin?

Tidak. Script pada tutorial ini dibuat menggunakan HTML, CSS, dan JavaScript sehingga tidak memerlukan plugin atau layanan eksternal.

Namun, setiap script tambahan tetap dapat memberikan sedikit beban pemrosesan pada browser. Karena itu, sebaiknya hindari memasang terlalu banyak script yang memiliki fungsi serupa pada satu halaman.

Kesimpulan

Membuat daftar isi otomatis di Blogger dapat menjadi solusi praktis untuk meningkatkan navigasi pada artikel yang panjang. Dengan kombinasi HTML, CSS, dan JavaScript, daftar isi dapat membaca heading H2 dan H3 kemudian membuat tautan menuju bagian artikel secara otomatis.

Selain membuat artikel lebih mudah dijelajahi, struktur heading yang rapi juga membantu pembaca memahami pembagian topik dalam sebuah artikel. Pastikan Anda menggunakan H2 dan H3 secara konsisten serta melakukan pengujian pada desktop dan perangkat mobile.

Dengan struktur konten yang baik, navigasi yang jelas, dan informasi yang benar-benar bermanfaat bagi pembaca, artikel Blogger Anda akan menjadi lebih terorganisir dan nyaman untuk dibaca.

FAQ Daftar Isi Otomatis di Blogger

Apa itu daftar isi otomatis di Blogger?

Daftar isi otomatis adalah navigasi yang menampilkan subjudul artikel dan membuatnya menjadi tautan yang dapat diklik untuk menuju bagian tertentu dalam halaman.

Apakah daftar isi Blogger dibuat menggunakan JavaScript?

Ya. Pada tutorial ini JavaScript digunakan untuk membaca heading H2 dan H3, memberikan ID pada heading, kemudian membuat tautan navigasi secara otomatis.

Apakah daftar isi otomatis bisa digunakan pada artikel panjang?

Ya. Daftar isi sangat berguna pada artikel yang memiliki banyak subjudul karena pembaca dapat langsung menuju bagian yang mereka inginkan.

Kenapa judul tertentu tidak muncul di daftar isi?

Pastikan judul tersebut menggunakan elemen H2 atau H3. Teks yang hanya ditebalkan menggunakan fitur Bold tidak akan dibaca sebagai heading oleh script.

Apakah daftar isi otomatis bisa meningkatkan SEO Blogger?

Daftar isi bukan jaminan peningkatan peringkat di mesin pencari. Fitur ini lebih utama untuk membantu navigasi dan pengalaman pengguna, sementara struktur heading yang baik membantu membuat konten lebih terorganisir.

Apakah script daftar isi membutuhkan plugin?

Tidak. Script pada tutorial ini menggunakan HTML, CSS, dan JavaScript sehingga tidak membutuhkan plugin atau layanan eksternal.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!