Beranda / Semua Postingan / Tips Blogger

Cara Membuat Daftar Isi (Table of Contents) Otomatis di Blogger Tanpa Error

Posting Komentar
Cara membuat daftar isi otomatis di Blogger

Artikel yang panjang akan lebih mudah dibaca jika memiliki navigasi yang jelas. Salah satu fitur yang dapat membantu pembaca menemukan bagian tertentu dengan cepat adalah daftar isi atau Table of Contents (TOC).

Dengan daftar isi otomatis, pembaca dapat melihat gambaran isi artikel sekaligus melompat langsung ke bagian yang ingin dibaca. Fitur ini sangat berguna untuk artikel tutorial, panduan, review, maupun konten panjang yang memiliki banyak subjudul.

Pada Blogger, daftar isi otomatis dapat dibuat menggunakan HTML, CSS, dan JavaScript sederhana tanpa memasang plugin tambahan. Pada tutorial ini, Anda akan mempelajari cara membuat daftar isi otomatis di Blogger, cara memasangnya, serta cara mengatasi beberapa masalah yang umum terjadi.

Apa Itu Daftar Isi Otomatis di Blogger?

Daftar isi otomatis adalah komponen yang membaca struktur heading dalam artikel, kemudian membuat kumpulan tautan menuju setiap bagian tersebut secara otomatis.

Script yang digunakan pada tutorial ini akan mendeteksi heading <h2> dan <h3> di dalam area artikel. Setelah ditemukan, script akan membuat tautan berdasarkan judul masing-masing heading.

Ketika pembaca memilih salah satu tautan, browser akan berpindah menuju bagian artikel yang sesuai.

Manfaat Daftar Isi untuk Artikel Blogger

Memasang daftar isi bukan sekadar membuat artikel terlihat lebih profesional. Fitur ini juga dapat meningkatkan kemudahan navigasi, terutama pada artikel yang memiliki pembahasan panjang.

  • Memudahkan pembaca menemukan informasi tertentu.
  • Membantu pembaca memahami struktur artikel.
  • Membuat navigasi artikel menjadi lebih praktis.
  • Membantu memperjelas hierarki heading pada konten.
  • Dapat meningkatkan pengalaman pengguna pada artikel panjang.
  • Membuat tampilan artikel terlihat lebih terstruktur.

Dari sisi SEO, struktur heading yang jelas dan navigasi yang baik dapat membantu mesin pencari memahami struktur konten. Namun, daftar isi tidak menjamin artikel mendapatkan ranking tertentu atau muncul di halaman pertama Google.

Bagaimana Cara Kerja Script Daftar Isi?

Script daftar isi pada tutorial ini bekerja dengan beberapa tahap sederhana. Pertama, JavaScript mencari elemen artikel Blogger. Setelah itu, script mencari semua heading h2 dan h3 yang terdapat di dalam artikel.

Setiap heading kemudian diberikan ID unik. ID tersebut digunakan sebagai tujuan tautan pada daftar isi.

Secara sederhana, alurnya adalah:

  1. Script mencari area konten artikel.
  2. Script mendeteksi heading H2 dan H3.
  3. Setiap heading diberikan ID unik.
  4. Daftar tautan dibuat berdasarkan heading tersebut.
  5. Daftar isi ditampilkan pada elemen yang telah disediakan.

Kode Daftar Isi Otomatis untuk Blogger

Berikut kode yang dapat digunakan untuk membuat daftar isi otomatis. Kode ini menggunakan class khusus agar risiko bentrok dengan CSS template Blogger dapat diminimalkan. 

<style>
/* Container Daftar Isi */
.bm-toc-container {
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 18px;
  margin: 20px 0;
}

/* Judul Daftar Isi */
.bm-toc-title {
  display: block;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

/* Link Daftar Isi */
.bm-toc-link {
  display: block;
  margin: 8px 0;
  color: #0056b3;
  text-decoration: none;
  line-height: 1.5;
}

/* Link H3 */
.bm-toc-link-h3 {
  margin-left: 20px;
  font-size: 14px;
}

/* Hover */
.bm-toc-link:hover {
  color: #d35400;
  text-decoration: underline;
}
</style>

<script type="text/javascript">
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {

  var tocBox = document.getElementById("bm-toc-box");

  if (!tocBox) {
    return;
  }

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

  if (!postContent) {
    return;
  }

  var headings = postContent.querySelectorAll("h2, h3");

  if (!headings.length) {
    tocBox.style.display = "none";
    return;
  }

  var tocHTML =
    '<span class="bm-toc-title">Daftar Isi Artikel</span>';

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

    var heading = headings[i];

    if (!heading.id) {
      heading.id = "bm-bagian-" + (i + 1);
    }

    var headingText = heading.textContent.trim();

    var linkClass = "bm-toc-link";

    if (heading.tagName.toLowerCase() === "h3") {
      linkClass += " bm-toc-link-h3";
    }

    tocHTML +=
      '<a class="' + linkClass + '" href="#' +
      heading.id + '">' +
      headingText +
      '</a>';
  }

  tocBox.innerHTML = tocHTML;
  tocBox.classList.add("bm-toc-container");

});
//]]>
</script>

Cara Memasang Daftar Isi Otomatis di Blogger

1. Backup Template Blogger

Sebelum mengubah kode template, sebaiknya buat backup terlebih dahulu. Backup akan membantu mengembalikan template apabila terjadi kesalahan saat proses pemasangan.

2. Buka Menu Tema

Masuk ke dashboard Blogger dan pilih blog yang ingin Anda pasangi daftar isi. Setelah itu buka menu Tema.

3. Buka Edit HTML

Masuk ke bagian Edit HTML pada template Blogger. Anda akan melihat kode HTML yang digunakan oleh template.

4. Cari Tag </body>

Gunakan fitur pencarian pada editor dan cari: 

</body>

Tempelkan kode CSS dan JavaScript daftar isi tepat sebelum tag tersebut.

5. Simpan Perubahan

Setelah memastikan kode sudah ditempatkan dengan benar, simpan perubahan template. Jika muncul pesan error, periksa kembali kode sebelum melanjutkan.

Cara Menampilkan Daftar Isi di Artikel

Setelah script dipasang pada template, Anda perlu menyediakan tempat untuk menampilkan daftar isi pada artikel.

Buka artikel Blogger yang ingin diberi daftar isi, kemudian gunakan Tampilan HTML pada editor postingan. Letakkan kode berikut pada posisi yang Anda inginkan. 

<div id="bm-toc-box"></div>

Posisi yang umum digunakan adalah setelah paragraf pembuka atau sebelum pembahasan utama artikel.

Setelah artikel dipublikasikan, script akan membaca heading H2 dan H3 kemudian membuat daftar isi secara otomatis.

Contoh Struktur Artikel yang Cocok

Agar daftar isi bekerja dengan baik, gunakan struktur heading yang konsisten. Contohnya: 

<h2>Apa Itu Blogger?</h2>

<h2>Cara Membuat Blog</h2>

<h3>Membuat Akun Blogger</h3>

<h3>Menentukan Nama Blog</h3>

<h2>Tips Mengembangkan Blog</h2>

Struktur tersebut memungkinkan daftar isi menampilkan bagian utama sebagai H2 dan subbagian sebagai H3.

Cara Menguji Daftar Isi Blogger

Setelah pemasangan selesai, lakukan pengujian sebelum menggunakan script tersebut pada seluruh artikel.

  1. Buka artikel yang memiliki beberapa heading H2 dan H3.
  2. Pastikan kotak daftar isi muncul.
  3. Periksa apakah semua heading yang diinginkan terdeteksi.
  4. Klik salah satu tautan pada daftar isi.
  5. Pastikan browser berpindah ke bagian artikel yang sesuai.
  6. Uji halaman menggunakan perangkat mobile.

Jika artikel tidak memiliki H2 atau H3, daftar isi akan disembunyikan oleh script. Hal ini dilakukan agar kotak kosong tidak muncul pada artikel yang memang tidak membutuhkan daftar isi.

Kesalahan yang Sering Terjadi

1. Lupa Memasang Kode Pemanggil

Script tidak akan menampilkan daftar isi jika artikel tidak memiliki elemen: 

<div id="bm-toc-box"></div>

Pastikan kode tersebut ditempatkan pada artikel yang ingin diberi daftar isi.

2. Menggunakan Bold sebagai Subjudul

Teks yang hanya menggunakan bold bukanlah heading HTML. Script pada tutorial ini mencari elemen H2 dan H3, sehingga teks tebal biasa tidak akan dimasukkan ke daftar isi.

Gunakan struktur heading yang benar melalui editor Blogger atau mode HTML.

3. Selector Template Berbeda

Script di atas menggunakan selector: 

.post-body

Sebagian besar template Blogger menggunakan area konten dengan class tersebut, tetapi template custom tertentu dapat menggunakan struktur yang berbeda. Jika daftar isi tidak muncul, periksa struktur HTML template Anda.

4. Memasang Script Berkali-kali

Hindari memasang CSS dan JavaScript yang sama berulang kali pada template. Duplikasi kode dapat membuat proses pemeliharaan menjadi lebih sulit dan berpotensi menimbulkan konflik.

Tips SEO untuk Struktur Heading Blogger

Daftar isi akan bekerja lebih baik jika struktur artikel Anda memang sudah tertata. Gunakan heading berdasarkan hierarki informasi, bukan sekadar untuk memperbesar ukuran teks.

  • Gunakan satu H1 sebagai judul utama artikel.
  • Gunakan H2 untuk pembahasan utama.
  • Gunakan H3 untuk subpembahasan dari H2.
  • Gunakan judul heading yang deskriptif.
  • Hindari memasukkan kata kunci secara berlebihan.
  • Pastikan setiap bagian artikel benar-benar menjawab kebutuhan pembaca.

Struktur heading yang baik membantu pembaca memahami isi artikel sekaligus membuat konten lebih terorganisasi.

Apakah Daftar Isi Bisa Meningkatkan SEO?

Daftar isi dapat membantu dari sisi navigasi dan pengalaman pengguna, terutama pada artikel panjang. Struktur heading yang jelas juga membantu menggambarkan hubungan antarbagian dalam konten.

Namun, tidak tepat jika mengatakan bahwa memasang daftar isi otomatis pasti meningkatkan ranking Google. SEO tidak ditentukan oleh satu elemen saja. Kualitas konten, relevansi dengan search intent, internal linking, performa halaman, dan banyak faktor lainnya tetap perlu diperhatikan.

FAQ Daftar Isi Otomatis Blogger

Apakah daftar isi otomatis bisa dipasang di Blogger?

Bisa. Daftar isi dapat dibuat menggunakan HTML, CSS, dan JavaScript yang ditempatkan pada template Blogger serta elemen pemanggil pada artikel.

Apakah daftar isi harus dibuat secara manual?

Tidak. Dengan script otomatis, heading H2 dan H3 dapat dibaca oleh JavaScript sehingga daftar tautan dibuat secara otomatis.

Apakah daftar isi membuat artikel lebih SEO friendly?

Daftar isi dapat membantu navigasi dan struktur konten, tetapi bukan jaminan ranking. Optimasi SEO tetap membutuhkan konten yang relevan dan berkualitas serta struktur website yang baik.

Kenapa daftar isi tidak muncul?

Beberapa penyebabnya antara lain kode pemanggil belum dipasang, artikel tidak memiliki H2 atau H3, selector .post-body berbeda pada template, atau terdapat error JavaScript.

Apakah daftar isi harus ada di semua artikel?

Tidak. Daftar isi paling berguna untuk artikel yang cukup panjang dan memiliki beberapa bagian pembahasan. Artikel pendek mungkin tidak memerlukannya.

Kesimpulan

Cara membuat daftar isi otomatis di Blogger dapat dilakukan menggunakan kombinasi HTML, CSS, dan JavaScript sederhana. Script akan membaca heading H2 dan H3 pada artikel kemudian membuat daftar tautan yang dapat digunakan pembaca untuk berpindah ke bagian tertentu.

Selain membuat artikel lebih terstruktur, daftar isi juga membantu pembaca menemukan informasi yang mereka cari dengan lebih cepat. Karena itu, fitur ini sangat cocok diterapkan pada artikel tutorial, panduan, review, dan konten panjang lainnya.

Yang paling penting, gunakan struktur heading yang benar dan jangan menganggap daftar isi sebagai jalan pintas untuk mendapatkan ranking. Jadikan fitur ini sebagai bagian dari strategi SEO Blogger yang lebih luas, bersama konten berkualitas, internal linking, performa halaman, dan pengalaman pengguna yang baik.

Posting Komentar untuk "Cara Membuat Daftar Isi (Table of Contents) Otomatis di Blogger Tanpa Error"

Posting Komentar