Beranda / Semua Postingan / Tips Blogger

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

Posting Komentar

Artikel Blogger yang panjang akan lebih mudah dibaca ketika pembaca dapat melihat struktur pembahasannya sejak awal. Salah satu cara yang banyak digunakan adalah menambahkan daftar isi otomatis Blogger atau Table of Contents (TOC) yang menampilkan daftar subjudul dari artikel.

Dengan TOC otomatis, Anda tidak perlu membuat daftar link satu per satu setiap kali menerbitkan artikel. JavaScript dapat membaca heading seperti H2 dan H3, kemudian membuat daftar tautan secara otomatis berdasarkan struktur artikel tersebut.

Pada panduan ini, kita akan membuat TOC menggunakan HTML, CSS, dan JavaScript tanpa library tambahan. Pembahasannya dimulai dari struktur heading yang benar, kode daftar isi Blogger, cara memasangnya di postingan, membuat item dapat diklik, membuat tampilannya responsive di HP, sampai memperbaiki masalah ketika daftar isi tidak muncul atau anchor tidak bekerja.

Apa Itu Daftar Isi Otomatis Blogger?

Daftar isi otomatis adalah elemen pada artikel yang menampilkan daftar judul atau subjudul berdasarkan heading yang ada di dalam konten. Setiap item dapat menjadi tautan menuju bagian tertentu pada halaman.

Berbeda dengan daftar isi manual, Anda tidak perlu mengetik semua judul kemudian memberikan ID anchor satu per satu. JavaScript dapat membaca heading yang tersedia dan mengubahnya menjadi daftar tautan secara otomatis.

Contohnya, sebuah artikel mempunyai struktur:

  • H2: Apa Itu Blogger?
  • H2: Cara Membuat Blog
  • H3: Membuat Akun
  • H3: Memilih Nama Blog
  • H2: Mengatur Template
  • H3: Mengubah Warna

TOC akan membaca heading tersebut kemudian menampilkan daftar yang dapat diklik.

Mengapa Table of Contents Penting untuk Artikel Panjang?

Daftar isi membantu pembaca memahami isi halaman tanpa harus membaca seluruh artikel dari awal. Mereka dapat melihat topik utama dan langsung menuju bagian yang dibutuhkan.

Untuk artikel tutorial yang mempunyai banyak langkah, fungsi ini cukup berguna karena pembaca mungkin hanya ingin membuka satu bagian tertentu. Misalnya, seseorang membaca tutorial Blogger tetapi hanya membutuhkan bagian tentang CSS atau cara memperbaiki error.

TOC juga membuat struktur artikel lebih terlihat jelas. H2 menjadi topik utama, sedangkan H3 menjadi subtopik di bawahnya.

Struktur Heading yang Benar Sebelum Membuat TOC

Sebelum memasang JavaScript, periksa terlebih dahulu struktur heading artikel. Script TOC tidak dapat bekerja dengan baik apabila struktur HTML artikel tidak konsisten.

Gunakan H1 untuk judul utama. Setelah itu, gunakan H2 untuk pembahasan utama dan H3 untuk bagian yang masih berada di bawah H2 tertentu.

Contoh struktur yang baik:

<h1>Judul Utama Artikel</h1>

<h2>Pembahasan Pertama</h2>
<p>Isi pembahasan...</p>

<h3>Sub Pembahasan Pertama</h3>
<p>Isi sub pembahasan...</p>

<h3>Sub Pembahasan Kedua</h3>
<p>Isi sub pembahasan...</p>

<h2>Pembahasan Kedua</h2>
<p>Isi pembahasan...</p>

Jangan menggunakan H3 hanya karena ukurannya terlihat lebih kecil. Heading sebaiknya mengikuti struktur informasi artikel, bukan sekadar tampilan visual.

Cara Kerja TOC Blogger Otomatis

Konsep kode yang akan digunakan cukup sederhana. Pertama, kita menyediakan sebuah container untuk daftar isi. JavaScript kemudian mencari semua H2 dan H3 di dalam artikel.

Setiap heading diberi ID unik jika belum mempunyai ID. Setelah itu, JavaScript membuat elemen link yang mengarah ke ID tersebut.

Secara sederhana alurnya seperti ini:

  1. Halaman memuat artikel.
  2. JavaScript mencari H2 dan H3.
  3. Setiap heading diperiksa apakah sudah mempunyai ID.
  4. Jika belum, script membuat ID otomatis.
  5. Script membuat daftar link.
  6. Daftar link dimasukkan ke container TOC.
  7. Ketika item diklik, browser berpindah ke heading tujuan.

Cara Membuat Daftar Isi Otomatis Blogger

Bagian berikut merupakan implementasi sederhana yang dapat digunakan pada postingan Blogger. Kode dibuat agar H2 dan H3 artikel terbaca otomatis.

Langkah 1: Siapkan Container Daftar Isi

Letakkan container berikut di bagian artikel yang ingin digunakan sebagai lokasi daftar isi. Biasanya posisi yang nyaman adalah setelah paragraf pembuka sebelum pembahasan utama.

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

Container tersebut belum berisi daftar judul. JavaScript akan mengisinya secara otomatis berdasarkan heading yang ditemukan.

Langkah 2: Tambahkan CSS untuk Tampilan TOC

Supaya daftar isi terlihat rapi, tambahkan CSS berikut. CSS ini dibuat dengan fokus pada tampilan sederhana dan responsive.

.toc-blogger {
  margin: 25px 0;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.toc-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.toc-content ul {
  margin: 0;
  padding-left: 20px;
}

.toc-content li {
  margin: 7px 0;
  line-height: 1.6;
}

.toc-content a {
  text-decoration: none;
}

.toc-content a:hover {
  text-decoration: underline;
}

Jika template Blogger Anda sudah mempunyai desain warna dan border sendiri, CSS dapat disesuaikan. Jangan menambahkan terlalu banyak efek karena fungsi utama TOC adalah membantu navigasi artikel.

Langkah 3: Tambahkan JavaScript Otomatis

Setelah container dan CSS tersedia, tambahkan JavaScript berikut untuk membaca heading H2 dan H3.

document.addEventListener("DOMContentLoaded", function () {
  var toc = document.getElementById("toc-blogger");

  if (!toc) {
    return;
  }

  var content = document.querySelector(".artikel-blogger");

  if (!content) {
    return;
  }

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

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

  var tocContent = toc.querySelector(".toc-content");
  var list = document.createElement("ul");

  headings.forEach(function (heading, index) {
    if (heading === toc.querySelector(".toc-title")) {
      return;
    }

    var id = heading.id;

    if (!id) {
      id = "toc-heading-" + (index + 1);
      heading.id = id;
    }

    var item = document.createElement("li");
    var link = document.createElement("a");

    link.href = "#" + id;
    link.textContent = heading.textContent.trim();

    item.appendChild(link);
    list.appendChild(item);
  });

  tocContent.appendChild(list);
});

JavaScript tersebut bekerja setelah halaman selesai dimuat. Script mencari elemen dengan ID toc-blogger, kemudian mencari H2 dan H3 yang berada di dalam artikel.

Setiap heading yang belum memiliki ID akan memperoleh ID otomatis seperti toc-heading-1, toc-heading-2, dan seterusnya.

Versi Kode yang Lebih Rapi dengan Struktur H2 dan H3 Bertingkat

TOC sebelumnya sudah dapat digunakan, tetapi H2 dan H3 akan berada pada satu tingkat list. Untuk artikel dengan banyak subheading, struktur bertingkat lebih mudah dibaca karena H3 terlihat sebagai bagian dari H2.

Berikut versi JavaScript yang membuat struktur berdasarkan urutan heading.

document.addEventListener("DOMContentLoaded", function () {
  var toc = document.getElementById("toc-blogger");

  if (!toc) {
    return;
  }

  var article = document.querySelector(".artikel-blogger");
  var tocContent = toc.querySelector(".toc-content");

  if (!article || !tocContent) {
    return;
  }

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

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

  var rootList = document.createElement("ul");
  var currentH2 = null;

  headings.forEach(function (heading, index) {
    var id = heading.id;

    if (!id) {
      id = "toc-heading-" + (index + 1);
      heading.id = id;
    }

    var item = document.createElement("li");
    var link = document.createElement("a");

    link.href = "#" + id;
    link.textContent = heading.textContent.trim();

    item.appendChild(link);

    if (heading.tagName.toLowerCase() === "h2") {
      rootList.appendChild(item);
      currentH2 = item;
    } else if (heading.tagName.toLowerCase() === "h3") {
      if (currentH2) {
        var subList = currentH2.querySelector("ul");

        if (!subList) {
          subList = document.createElement("ul");
          currentH2.appendChild(subList);
        }

        subList.appendChild(item);
      } else {
        rootList.appendChild(item);
      }
    }
  });

  tocContent.appendChild(rootList);
});

Dengan pendekatan tersebut, H3 akan menjadi daftar turunan dari H2 sebelumnya. Jika sebuah H3 berada sebelum H2, script tetap memasukkannya ke daftar utama agar tidak hilang.

Membuat TOC Lebih Nyaman di Perangkat Mobile

Daftar isi Blogger perlu memperhatikan perangkat mobile karena artikel sering dibuka melalui smartphone. Container yang terlalu lebar atau teks yang terlalu kecil dapat membuat navigasi sulit digunakan.

Gunakan padding yang cukup, ukuran teks yang terbaca, dan jarak antaritem yang tidak terlalu rapat. Jangan membuat tombol atau link TOC terlalu kecil.

CSS tambahan berikut dapat digunakan untuk memperbaiki jarak pada layar kecil:

@media (max-width: 600px) {
  .toc-blogger {
    margin: 20px 0;
    padding: 15px;
    border-radius: 10px;
  }

  .toc-title {
    font-size: 18px;
  }

  .toc-content li {
    margin: 8px 0;
    line-height: 1.55;
  }
}

Nilai tersebut dapat disesuaikan dengan template. Prinsipnya, daftar isi harus tetap berada di dalam area konten dan tidak menyebabkan halaman melebar ke samping.

Cara Membuat Anchor Link TOC Bekerja dengan Benar

Setiap item daftar isi harus mengarah ke ID heading. Misalnya, jika heading memiliki ID toc-heading-3, maka link harus menggunakan #toc-heading-3.

Contoh sederhana:

<h2 id="cara-membuat-blog">Cara Membuat Blog</h2>

<a href="#cara-membuat-blog">Cara Membuat Blog</a>

Ketika link tersebut diklik, browser akan menuju heading yang memiliki ID tersebut.

Masalah biasanya muncul ketika dua heading mempunyai ID yang sama. Karena itu, script otomatis pada panduan ini memberikan ID berdasarkan urutan apabila heading belum memiliki ID.

Bagaimana Jika Heading Sudah Memiliki ID?

Script yang digunakan tidak mengganti ID yang sudah ada. Jika sebuah H2 atau H3 sudah mempunyai ID, JavaScript akan menggunakan ID tersebut.

Contohnya:

<h2 id="pengaturan-blogger">Pengaturan Blogger</h2>

TOC akan otomatis membuat link menuju #pengaturan-blogger.

Perilaku ini berguna jika template atau struktur artikel Anda sudah menggunakan anchor tertentu dan Anda tidak ingin JavaScript menggantinya.

Cara Memasang TOC Hanya pada Artikel Tertentu

Tidak semua artikel harus memiliki daftar isi. Artikel pendek dengan dua atau tiga subjudul mungkin tidak membutuhkan TOC.

Dengan metode container pada panduan ini, TOC hanya muncul ketika elemen toc-blogger tersedia. Artinya, Anda dapat menambahkan container TOC hanya pada artikel yang memang membutuhkannya.

Artikel tanpa container tersebut tidak akan membuat TOC karena JavaScript akan menghentikan proses ketika elemen tidak ditemukan.

Cara Menyembunyikan TOC Jika Tidak Ada H2 atau H3

Script yang digunakan juga sudah mempunyai pemeriksaan terhadap jumlah heading. Jika tidak ditemukan H2 atau H3, container akan disembunyikan.

Bagian pentingnya adalah:

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

Dengan kondisi tersebut, Anda tidak perlu membuat logika tambahan untuk artikel yang tidak memiliki struktur heading.

Cara Menambahkan Smooth Scroll pada TOC

Secara default, link anchor dapat langsung berpindah ke ID tujuan. Jika ingin perpindahan terasa lebih halus, Anda dapat menggunakan CSS scroll-behavior.

html {
  scroll-behavior: smooth;
}

Pada template tertentu, aturan tersebut dapat diterapkan secara global. Namun, bila template sudah memiliki perilaku scroll sendiri, periksa terlebih dahulu agar tidak menimbulkan efek yang tidak diinginkan.

Masalah TOC Tidak Muncul di Blogger

Apabila daftar isi otomatis Blogger tidak muncul, periksa beberapa hal berikut sebelum mengubah kode secara acak.

Periksa ID Container

Pastikan HTML mempunyai ID yang sama dengan yang dicari JavaScript.

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

Jika ID berubah tetapi JavaScript masih mencari toc-blogger, script tidak akan menemukan container tersebut.

Periksa Selector Artikel

JavaScript pada contoh menggunakan selector .artikel-blogger. Karena itu, elemen artikel harus mempunyai class tersebut.

<article class="artikel-blogger">

Jika Anda menggunakan struktur lain, selector tersebut perlu disesuaikan.

Periksa H2 dan H3

Pastikan subjudul artikel benar-benar menggunakan tag H2 dan H3. Teks yang hanya dibuat tebal dengan <strong> tidak akan terbaca sebagai heading.

Contoh yang terbaca:

<h2>Judul Bagian</h2>
<h3>Sub Bagian</h3>

Sedangkan struktur berikut bukan heading:

<p><strong>Judul Bagian</strong></p>

Masalah Heading Tidak Terbaca

Jika beberapa heading muncul tetapi sebagian tidak masuk ke TOC, periksa apakah heading tersebut berada di luar area yang dipindai JavaScript.

Pada kode ini, pencarian dilakukan menggunakan:

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

Artinya, hanya H2 dan H3 yang berada di dalam elemen dengan class artikel-blogger yang akan dibaca.

Jika Anda mempunyai elemen lain seperti widget atau block tertentu di luar area tersebut, elemen itu tidak akan ikut dibaca.

Masalah Link Anchor Tidak Bekerja

Ketika item TOC sudah muncul tetapi saat diklik tidak menuju bagian yang benar, biasanya ada masalah pada ID heading atau struktur link.

Periksa hubungan antara:

<h2 id="toc-heading-1">Judul Bagian</h2>

dan:

<a href="#toc-heading-1">Judul Bagian</a>

Nilai setelah tanda # harus sama persis dengan ID target.

Masalah TOC Muncul di Tempat yang Salah

Lokasi TOC ditentukan oleh tempat Anda memasukkan container HTML. Jika daftar isi muncul terlalu bawah, pindahkan container ke bagian artikel yang diinginkan.

Untuk sebagian besar artikel tutorial, penempatan setelah pendahuluan dan sebelum pembahasan pertama cukup masuk akal. Pembaca dapat melihat struktur artikel setelah memahami topik yang akan dibahas.

Masalah TOC Merusak Layout Mobile

Jika halaman bergeser ke samping ketika dibuka di HP, periksa CSS container dan elemen di dalam TOC.

Hindari menetapkan lebar tetap yang terlalu besar. Misalnya, container tidak perlu menggunakan width: 800px pada semua perangkat.

Gunakan lebar yang mengikuti area artikel. Contoh sederhana:

.toc-blogger {
  width: 100%;
  box-sizing: border-box;
}

Aturan box-sizing juga membantu agar padding tidak menyebabkan elemen melewati lebar container.

Cara Menyesuaikan Tampilan TOC dengan Template Blogger

Setiap template mempunyai gaya visual berbeda. Tidak perlu membuat TOC terlihat seperti komponen yang berasal dari website lain.

Anda dapat menyesuaikan border, warna latar, ukuran judul, warna link, radius, dan jarak berdasarkan desain template yang digunakan.

Misalnya, apabila template Anda mempunyai desain minimalis, gunakan border tipis dan latar yang lembut. Jika template menggunakan tampilan gelap, warna container dan teks dapat disesuaikan supaya kontras tetap baik.

Yang paling penting adalah keterbacaan. Jangan memilih warna teks dan latar yang memiliki kontras terlalu rendah.

Membuat TOC dengan Tombol Buka dan Tutup

Untuk artikel dengan banyak heading, daftar isi dapat menjadi cukup panjang. Salah satu pengembangan adalah membuat TOC yang dapat dibuka dan ditutup.

Struktur HTML sederhananya dapat dibuat seperti berikut:

<div class="toc-blogger" id="toc-blogger">
  <button type="button" id="toc-toggle">Daftar Isi</button>
  <div class="toc-content"></div>
</div>

Kemudian tambahkan JavaScript untuk mengubah visibilitas konten:

document.addEventListener("DOMContentLoaded", function () {
  var toggle = document.getElementById("toc-toggle");
  var tocContent = document.querySelector("#toc-blogger .toc-content");

  if (!toggle || !tocContent) {
    return;
  }

  toggle.addEventListener("click", function () {
    if (tocContent.style.display === "none") {
      tocContent.style.display = "block";
    } else {
      tocContent.style.display = "none";
    }
  });
});

Fitur buka-tutup dapat digunakan jika artikel memiliki daftar subjudul yang sangat panjang. Untuk artikel pendek, TOC biasa sering sudah cukup.

Apakah TOC Harus Menggunakan Plugin?

Tidak. Konsep TOC pada panduan ini dibuat menggunakan HTML, CSS, dan JavaScript sehingga tidak membutuhkan library pihak ketiga.

Keuntungan pendekatan tersebut adalah Anda dapat mengontrol struktur dan tampilannya sesuai template. Namun, kode yang lebih kompleks juga membutuhkan pemeriksaan lebih teliti saat terjadi perubahan template.

Jika template Blogger Anda sudah mempunyai sistem TOC sendiri, sebaiknya jangan menambahkan script lain yang mempunyai fungsi sama. Dua script TOC yang aktif bersamaan dapat menyebabkan daftar isi ganda atau konflik.

Cara Membuat TOC Hanya Membaca H2 dan H3

Pada kode utama, selector yang digunakan adalah:

article.querySelectorAll("h2, h3");

Itulah sebabnya H2 dan H3 saja yang dibaca. H1 tidak masuk ke daftar isi karena judul utama biasanya sudah terlihat jelas di bagian atas artikel.

Jika Anda ingin hanya membaca H2, ubah selector menjadi:

article.querySelectorAll("h2");

Sementara jika ingin membaca H2, H3, dan H4:

article.querySelectorAll("h2, h3, h4");

Namun, semakin banyak level heading yang dimasukkan, semakin penting memastikan struktur hierarkinya tetap konsisten.

Cara Menghindari Duplikasi ID

ID HTML harus unik pada halaman. Jangan memberikan ID yang sama kepada dua heading.

Contoh yang tidak tepat:

<h2 id="tutorial">Tutorial Pertama</h2>
<h2 id="tutorial">Tutorial Kedua</h2>

Jika ID sama, link anchor tidak mempunyai target yang unik. Karena itu, gunakan ID berbeda untuk setiap heading apabila Anda menentukannya secara manual.

Dengan sistem otomatis pada panduan ini, heading yang belum mempunyai ID akan diberi ID berdasarkan urutannya.

Cara Menguji TOC Sebelum Artikel Dipublikasikan

Jangan hanya melihat apakah kotak TOC muncul. Lakukan pengujian dengan artikel yang mempunyai cukup banyak heading.

Buat contoh artikel yang memiliki beberapa H2 dan H3, kemudian lakukan pemeriksaan sebagai berikut:

  1. Pastikan kotak daftar isi muncul.
  2. Pastikan semua H2 masuk ke daftar.
  3. Pastikan H3 masuk sebagai subbagian.
  4. Klik setiap item TOC.
  5. Pastikan browser menuju heading yang benar.
  6. Periksa apakah tidak ada link yang kosong.
  7. Buka halaman dari smartphone.
  8. Periksa apakah halaman tetap nyaman dibaca.

Pengujian seperti ini penting terutama setelah mengganti template Blogger. Perubahan struktur HTML template dapat memengaruhi selector yang digunakan script.

Contoh Struktur Artikel dengan TOC Otomatis

Berikut contoh struktur sederhana yang dapat dijadikan model:

<article class="artikel-blogger">

  <h1>Cara Membuat Website di Blogger</h1>

  <p>Pendahuluan artikel...</p>

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

  <h2>Apa Itu Blogger?</h2>
  <p>Pembahasan...</p>

  <h2>Cara Membuat Blog</h2>
  <p>Pembahasan...</p>

  <h3>Membuat Akun</h3>
  <p>Pembahasan...</p>

  <h3>Memilih Nama Blog</h3>
  <p>Pembahasan...</p>

  <h2>Mengatur Template</h2>
  <p>Pembahasan...</p>

</article>

Ketika JavaScript aktif, heading tersebut akan dibaca dan dimasukkan ke dalam daftar isi tanpa perlu membuat link manual.

Versi Lengkap CSS dan JavaScript untuk Digunakan Bersama

Supaya lebih mudah diterapkan, berikut contoh gabungan CSS dan JavaScript. Kode ini menggunakan class dan ID yang sama dengan struktur sebelumnya.

<style>
.toc-blogger {
  width: 100%;
  box-sizing: border-box;
  margin: 25px 0;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.toc-title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.toc-content ul {
  margin: 0;
  padding-left: 20px;
}

.toc-content ul ul {
  margin-top: 6px;
}

.toc-content li {
  margin: 7px 0;
  line-height: 1.6;
}

.toc-content a {
  text-decoration: none;
}

.toc-content a:hover {
  text-decoration: underline;
}

html {
  scroll-behavior: smooth;
}

@media (max-width: 600px) {
  .toc-blogger {
    padding: 15px;
    margin: 20px 0;
  }

  .toc-title {
    font-size: 18px;
  }

  .toc-content li {
    margin: 8px 0;
    line-height: 1.55;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var toc = document.getElementById("toc-blogger");
  var article = document.querySelector(".artikel-blogger");

  if (!toc || !article) {
    return;
  }

  var tocContent = toc.querySelector(".toc-content");
  var headings = article.querySelectorAll("h2, h3");

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

  var rootList = document.createElement("ul");
  var currentH2 = null;

  headings.forEach(function (heading, index) {
    var id = heading.id;

    if (!id) {
      id = "toc-heading-" + (index + 1);
      heading.id = id;
    }

    var item = document.createElement("li");
    var link = document.createElement("a");

    link.href = "#" + id;
    link.textContent = heading.textContent.trim();

    item.appendChild(link);

    if (heading.tagName.toLowerCase() === "h2") {
      rootList.appendChild(item);
      currentH2 = item;
    } else {
      if (currentH2) {
        var subList = currentH2.querySelector("ul");

        if (!subList) {
          subList = document.createElement("ul");
          currentH2.appendChild(subList);
        }

        subList.appendChild(item);
      } else {
        rootList.appendChild(item);
      }
    }
  });

  tocContent.appendChild(rootList);
});
</script>

Jika kode tersebut ditempatkan sebagai bagian dari postingan, pastikan elemen artikel menggunakan class artikel-blogger dan container daftar isi menggunakan ID toc-blogger.

Perlukah Script TOC Dimasukkan ke Setiap Artikel?

Ada dua pendekatan. Script dapat ditempatkan langsung pada artikel tertentu atau dipasang pada template sehingga fungsi tersedia secara lebih luas.

Untuk artikel tertentu saja, memasukkan container dan kode yang diperlukan pada postingan dapat menjadi pilihan yang sederhana. TOC hanya aktif pada artikel yang menggunakan container tersebut.

Untuk blog yang sangat sering menggunakan TOC, script dapat dipindahkan ke template Blogger dan dibuat memproses container TOC yang tersedia. Dengan pendekatan itu, Anda tidak perlu menyalin JavaScript yang sama berulang kali ke setiap artikel.

Namun, pemasangan pada template memerlukan penyesuaian terhadap struktur template yang Anda gunakan. Selector seperti .artikel-blogger perlu diganti jika template memiliki class konten posting yang berbeda.

Cara Menentukan Selector Konten Artikel pada Template Blogger

Jika script TOC dipasang ke template, bagian yang perlu diperhatikan adalah selector konten artikel. Tidak semua template menggunakan class yang sama.

Misalnya sebuah template dapat menggunakan class tertentu untuk area posting, sementara template lain menggunakan nama class berbeda. Script harus mencari heading di dalam area konten artikel, bukan seluruh halaman.

Hal ini penting supaya heading dari sidebar, footer, widget, komentar, atau elemen lain tidak ikut dimasukkan ke daftar isi.

Kenapa TOC Bisa Memasukkan Heading dari Widget?

Masalah tersebut biasanya terjadi jika JavaScript menggunakan selector yang terlalu luas. Contohnya:

document.querySelectorAll("h2, h3");

Selector tersebut dapat membaca seluruh H2 dan H3 pada halaman, termasuk heading dari bagian lain di luar artikel.

Lebih aman membatasi pencarian ke area artikel, misalnya:

article.querySelectorAll("h2, h3");

Atau menggunakan selector konten posting yang memang dimiliki template Anda.

Cara Membuat TOC Tetap Aman Saat Judul Heading Mengandung Simbol

Dengan metode yang digunakan pada artikel ini, Anda tidak perlu mengubah teks heading menjadi ID secara manual. Script membuat ID berdasarkan nomor urutan.

Contohnya, heading:

<h2>Cara Membuat HTML & CSS di Blogger</h2>

dapat memperoleh ID seperti:

toc-heading-1

Hal ini membuat karakter khusus pada judul tidak menjadi bagian dari ID otomatis, sehingga mekanisme anchor lebih sederhana.

Tips Memilih Isi Heading agar TOC Mudah Dipahami

Daftar isi akan terlihat bagus apabila heading artikelnya sendiri jelas. Hindari heading yang terlalu pendek seperti Pertama, Berikutnya, atau Penjelasan.

Lebih baik gunakan heading yang langsung menjelaskan isi bagian tersebut. Contohnya:

  • Cara Memasang Template Blogger
  • Cara Membuat Tombol CTA
  • Cara Memperbaiki Error pada Template
  • Cara Membuat Daftar Isi Responsive

Heading seperti itu akan membuat daftar isi lebih informatif bahkan sebelum pembaca membuka bagian yang dituju.

Kesalahan yang Sebaiknya Dihindari Saat Membuat TOC

Menggunakan ID yang Sama

Setiap target anchor sebaiknya mempunyai ID unik. ID ganda dapat membuat browser memilih target yang tidak sesuai.

Membaca Semua Heading di Halaman

Jangan menggunakan selector global apabila halaman mempunyai sidebar dan widget yang juga menggunakan H2 atau H3.

Tidak Menguji di Mobile

TOC dapat terlihat bagus di desktop tetapi membuat artikel melebar di smartphone jika CSS tidak menggunakan lebar yang sesuai.

Menambahkan Dua Script TOC

Jangan memasang dua sistem TOC berbeda dalam satu halaman tanpa alasan. Script ganda dapat membuat daftar isi muncul dua kali atau menghasilkan ID yang tidak konsisten.

Menggunakan Heading Hanya untuk Memperbesar Teks

Heading seharusnya menunjukkan struktur dokumen. Jika hanya ingin membuat teks lebih besar, gunakan CSS daripada mengganti struktur heading secara sembarangan.

Checklist Daftar Isi Otomatis Blogger

Sebelum menggunakan TOC pada artikel yang sebenarnya, lakukan pemeriksaan berikut:

  • Judul utama menggunakan H1.
  • Pembahasan utama menggunakan H2.
  • Subpembahasan menggunakan H3 jika diperlukan.
  • Container TOC mempunyai ID yang sesuai dengan JavaScript.
  • Selector artikel sesuai dengan struktur HTML.
  • Semua item TOC dapat diklik.
  • Heading tujuan mempunyai ID.
  • Tidak ada ID yang sama.
  • Widget dan sidebar tidak ikut masuk ke TOC.
  • TOC tidak melebar di smartphone.
  • Artikel tanpa heading dapat menyembunyikan TOC.
  • Tidak ada dua script TOC yang bekerja bersamaan.

Temukan Template Blogger dan Tools untuk Blog Anda

yang dapat membantu menyesuaikan tampilan serta kebutuhan website Anda.

kunjungi damarsatria.web.id

Kesimpulan

Membuat daftar isi otomatis Blogger dapat dilakukan menggunakan HTML, CSS, dan JavaScript tanpa harus menulis link anchor secara manual untuk setiap heading. Prinsipnya adalah menyediakan container TOC, membaca H2 dan H3 pada artikel, memberikan ID unik pada heading, lalu membuat link secara otomatis.

Struktur heading menjadi bagian penting dari sistem tersebut. Gunakan H2 untuk pembahasan utama dan H3 untuk subpembahasan agar daftar isi mempunyai hierarki yang jelas.

Untuk hasil yang lebih baik, batasi selector JavaScript hanya pada area konten artikel. Dengan begitu, heading dari sidebar, widget, atau elemen lain tidak ikut masuk ke dalam Table of Contents.

Jangan lupa melakukan pengujian setelah memasang kode, terutama pada artikel panjang dan perangkat mobile. Periksa apakah TOC muncul, apakah semua heading terbaca, apakah link anchor menuju bagian yang benar, dan apakah tampilannya tidak merusak layout Blogger.

Dengan struktur yang konsisten dan kode yang disesuaikan dengan template, Anda dapat membuat TOC Blogger otomatis yang ringan, mudah dikustomisasi, dan hanya ditampilkan pada artikel yang memang membutuhkannya.

FAQ Seputar Daftar Isi Otomatis Blogger

Apakah daftar isi otomatis Blogger bisa dibuat tanpa plugin?

Bisa. Daftar isi dapat dibuat menggunakan HTML, CSS, dan JavaScript. Script dapat membaca heading H2 dan H3 kemudian membuat link menuju bagian artikel secara otomatis.

Apakah TOC Blogger bisa membaca H2 dan H3 secara otomatis?

Bisa. JavaScript dapat menggunakan selector H2 dan H3 untuk mengambil heading dari area konten artikel, kemudian membuat daftar link berdasarkan urutan heading tersebut.

Mengapa daftar isi Blogger tidak muncul?

Periksa ID container TOC, selector area artikel, keberadaan H2 atau H3, dan posisi JavaScript. Jika selector tidak sesuai dengan struktur HTML halaman, script tidak akan menemukan heading yang harus diproses.

Mengapa heading dari sidebar ikut masuk ke daftar isi?

Masalah tersebut biasanya terjadi karena script membaca semua H2 dan H3 pada halaman. Batasi pencarian heading hanya pada elemen konten artikel agar heading sidebar, widget, atau footer tidak ikut diproses.

Apakah daftar isi Blogger bisa responsive di HP?

Bisa. Gunakan container dengan lebar fleksibel, box-sizing yang sesuai, padding yang tidak berlebihan, dan media query untuk mengatur ukuran serta jarak ketika halaman dibuka pada layar kecil.

Apakah TOC dapat dibuat hanya muncul pada artikel tertentu?

Bisa. Salah satu pendekatan adalah memasukkan container TOC hanya pada artikel yang membutuhkan daftar isi. JavaScript akan berhenti apabila container tersebut tidak ditemukan sehingga artikel lain tidak menampilkan TOC.

Apakah script TOC harus dimasukkan ke setiap postingan?

Tidak selalu. Untuk penggunaan terbatas, script dapat ditempatkan pada artikel tertentu. Untuk blog yang sering menggunakan TOC, script dapat ditempatkan pada template dan dibuat membaca container TOC pada artikel yang memilikinya, dengan selector yang disesuaikan dengan struktur template.

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

Posting Komentar