Beranda / Blogger / Pengembangan Web / Tutorial

Cara Membuat Daftar Isi Otomatis di Blogger: Panduan Lengkap untuk Template Default

Posting Komentar
Ilustrasi laptop yang menampilkan halaman tutorial dengan daftar isi otomatis, menggambarkan langkah pembuatan TOC di Blogger.

Pendahuluan

Daftar isi (Table of Contents/TOC) adalah elemen penting dalam sebuah artikel panjang, terutama pada blog berbasis tutorial, teknologi, dan informasi praktis. Struktur artikel yang jelas dan rapi bukan hanya membantu pembaca menemukan bagian yang mereka cari, tetapi juga meningkatkan SEO melalui peningkatan waktu baca dan navigasi internal yang lebih baik.

Pada platform Blogger (Blogspot), fitur daftar isi otomatis tidak tersedia secara default. Namun, kamu bisa menambahkannya secara manual menggunakan kombinasi HTML, CSS, dan JavaScript. Artikel ini akan memberikan panduan lengkap dan terperinci mengenai cara membuat daftar isi otomatis pada template Blogger bawaan, tanpa perlu menggunakan template premium seperti LinkMagz atau yang lainnya.

Panduan ini dirancang agar mudah dipahami oleh semua pengguna, baik pemula maupun yang sudah terbiasa mengedit template. Seluruh langkah dijelaskan secara sistematis, termasuk cara menempatkan kode, cara kerja TOC, dan tips SEO agar daftar isi dapat meningkatkan kualitas artikel.

Mengapa Daftar Isi Penting untuk Artikel Blog?

1. Meningkatkan Pengalaman Pengguna

Pembaca dapat langsung melompat ke bagian yang mereka butuhkan tanpa harus menggulir panjang. Hal ini sangat membantu terutama untuk artikel tutorial, ulasan panjang, dan panduan teknis.

2. Membantu Google Memahami Struktur Konten

Google menyukai artikel yang memiliki struktur jelas dan rapi. Heading H2 dan H3 yang tertata membantu crawler menganalisis isi artikel dengan mudah. Daftar isi otomatis juga memberi peluang muncul sebagai rich snippet.

3. Meningkatkan Durasi Kunjungan

Pembaca cenderung bertahan lebih lama ketika navigasi lebih mudah. Bounce rate menurun, sinyal SEO meningkat.

4. Memudahkan Penggunaan di Mobile

Screens kecil sering membuat pembaca kesulitan menemukan bagian tertentu. Daftar isi membantu mereka navigasi lebih efisien.

Cara Kerja Daftar Isi Otomatis di Blogger

TOC otomatis bekerja dengan memindai seluruh heading dalam artikel—biasanya H2, H3, dan H4. Sistem akan mengambil judul-judul tersebut, membuat tautan internal (#id), lalu menampilkannya dalam bentuk list dinamis.

Syaratnya hanya satu:
Artikel harus memiliki heading (H2 atau H3).
Tanpa heading, daftar isi tidak bisa terbentuk.

Cara Membuat Daftar Isi Otomatis di Blogger (Template Default)

Panduan berikut berlaku untuk semua template bawaan Blogger seperti Contempo, Soho, Notable, Essential, dan simple.

1. Menyiapkan Struktur Dasar TOC

Sebelum memulai, pastikan kamu memiliki akses ke:

  • Dashboard Blogger
  • Menu Theme → Edit HTML
  • Pengetahuan dasar HTML (tidak wajib, tapi membantu)

Struktur dasar TOC terdiri dari:

  • Container TOC
  • CSS untuk tampilan
  • JavaScript untuk membaca heading otomatis

Kode berikut sudah disesuaikan supaya kompatibel dengan template default Blogger.

2. Menambahkan Container TOC ke Template Blogger

Container ini akan menjadi tempat TOC muncul pada setiap artikel.

Langkah-langkah:

  1. Masuk ke Theme.
  2. Klik Edit HTML.
  3. Cari baris berikut:
<data:post.body/>
  1. Tempelkan kode ini tepat di atasnya:
<div id="toc"><b class="toc">Daftar Isi</b></div>

Dengan menambahkannya di template, TOC akan otomatis muncul di semua artikel tanpa kamu harus memasukkannya manual setiap posting.

3. Menambahkan CSS untuk Styling TOC

CSS ini membuat tampilan daftar isi rapi, profesional, dan responsif di mobile.

Langkah:

Masih di menu Edit HTML:

  1. Cari bagian <head>.
  2. Tempel kode CSS berikut sebelum </head>.
<style>
#toc {
  border: 1px solid #e1e1e1;
  background: #fff;
  padding: 12px;
  margin: 12px 0;
  border-radius: 6px;
  font-family: Arial, Helvetica, sans-serif;
}
#toc .toc {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}
#toc ul { list-style: none; padding-left: 6px; margin:0; }
#toc li { margin: 6px 0; }
#toc a { text-decoration:none; color:#0b66c3; }
#toc li.toc-h3 { padding-left: 12px; }
#toc li.toc-h4 { padding-left: 22px; }
#toc .toc-toggle {
  display:none;
  cursor:pointer;
  float:right;
}
@media (max-width:780px){
  #toc ul { display:none; }
  #toc.open ul { display:block; }
  #toc .toc-toggle { display:inline-block; }
}
</style>

4. Menambahkan JavaScript untuk Membaca Heading Otomatis

JavaScript ini bertugas:

  • Mendeteksi H2, H3, H4
  • Memberikan id otomatis
  • Membuat link daftar isi
  • Menambahkan highlight saat scrolling
  • Mengaktifkan toggle untuk mobile

Langkah:

  1. Gulir ke bawah template.
  2. Tempel skrip ini sebelum tag penutup </body>.
<script>
(function() {
  var postSelector = '.post-body, .entry-content, article';
  var headings = ['h2','h3','h4'];
  var tocRoot = document.getElementById('toc');

  if (!tocRoot) return;

  var contentEl = null;
  postSelector.split(',').forEach(s=>{
    if (!contentEl) contentEl = document.querySelector(s.trim());
  });

  if (!contentEl) return;

  var found = [];
  headings.forEach(h=>found = found.concat([...contentEl.querySelectorAll(h)]));

  if (found.length === 0) {
    tocRoot.style.display='none';
    return;
  }

  var usedIds = {};
  function makeId(t,i){
    var id = t.trim().toLowerCase().replace(/[^a-z0-9]+/g,'-');
    if(!id) id='heading-'+i;
    var base=id, k=1;
    while(usedIds[id]) id=base+'-'+k++;
    usedIds[id]=true;
    return id;
  }

  found.forEach((h,i)=>{
    if(!h.id) h.id=makeId(h.textContent||'heading',i);
  });

  var ul = document.createElement('ul');
  found.forEach(h=>{
    var lvl = h.tagName==='H2'?2:h.tagName==='H3'?3:4;
    var li = document.createElement('li');
    li.className='toc-h'+lvl;
    var a = document.createElement('a');
    a.href='#'+h.id;
    a.textContent=h.textContent;
    a.onclick=e=>{
      e.preventDefault();
      document.getElementById(h.id).scrollIntoView({behavior:'smooth'});
      history.replaceState(null,null,'#'+h.id);
    };
    li.appendChild(a);
    ul.appendChild(li);
  });

  tocRoot.appendChild(ul);

  var toggle = document.createElement('span');
  toggle.className='toc-toggle';
  toggle.textContent='⌄';
  toggle.onclick=()=>tocRoot.classList.toggle('open');
  tocRoot.querySelector('.toc').appendChild(toggle);

})();
</script>

5. Struktur Heading yang Benar untuk TOC

TOC hanya bisa membaca heading, bukan tulisan biasa.
Gunakan struktur berikut untuk hasil optimal:

Contoh Struktur Heading

<h2>Cara Membuat Blog</h2>
<p>Paragraf penjelasan...</p>

<h3>Membuat Akun Google</h3>
<h3>Membuat Nama Blog</h3>

<h2>Cara Mengedit Template</h2>
<h3>Membuka Menu Edit HTML</h3>
<h3>Menambahkan CSS</h3>

Aturan Penting

Hal Penjelasan
Wajib ada H2 Agar TOC punya daftar utama
H3 opsional Untuk sub-topik
Jangan pakai H1 Template sudah punya judul utama
Jangan buat heading berurutan tanpa isi Terlihat buruk untuk UX

6. Tips SEO Saat Menggunakan Daftar Isi

TOC bukan sekadar dekorasi; ia bisa meningkatkan SEO artikel jika digunakan dengan benar.

1. Gunakan Heading Berisi Keyword Turunan

Contoh:

  • “Cara Membuat Daftar Isi Blogger Otomatis”
  • “Menambahkan JavaScript TOC di Template Blogger”

2. Jangan Terlalu Banyak Heading

Artikel dengan 25 heading H2 tidak dianggap berkualitas oleh Google.

3. Gunakan Bahasa yang Natural

Google mendeteksi spam heading yang memuat keyword berlebihan.

4. Pastikan TOC Tidak Menutupi Konten Mobile

CSS di atas sudah memuat toggle agar TOC bisa dibuka/tutup. Ini penting untuk skor SEO mobile.

5. Pastikan Anchor (#id) Tidak Duplikat

Ini sudah otomatis di-handle oleh skrip.

7. Troubleshooting Umum

Tidak semua template Blogger punya struktur DOM yang sama. Ini beberapa masalah umum.

TOC Tidak Muncul

Kemungkinan penyebab:

  • Tidak ada H2/H3 dalam artikel
  • Salah menempatkan <div id="toc">
  • JavaScript tidak dimuat (biasanya konflik script)
  • Template menggunakan .post-body berbeda

TOC Muncul Tapi Kosong

Periksa apakah heading kamu:

  • Ditulis dengan format HTML (bukan bold biasa)
  • Tidak berada dalam blockquote atau table

Tampilan Berantakan di Mobile

Periksa CSS media query.

FAQ

1. Apakah daftar isi otomatis Blogger bisa bekerja di semua template bawaan?

Ya, selama template masih memiliki elemen .post-body atau struktur artikel standar, TOC akan berfungsi normal.

2. Apakah perlu memasukkan kode TOC setiap kali membuat postingan baru?

Tidak perlu. Setelah dipasang di template, TOC bekerja otomatis untuk semua postingan.

3. Apakah daftar isi membantu meningkatkan SEO artikel Blogger?

Ya. TOC membuat artikel lebih terstruktur, memudahkan navigasi, dan meningkatkan durasi baca. Ini sinyal positif untuk SEO.

4. Bisakah TOC menampilkan nomor seperti 1, 1.1, 1.2?

Bisa. Kamu hanya perlu menambahkan CSS counter() atau menggunakan skrip khusus.

5. Apakah TOC menyebabkan artikel menjadi berat?

Tidak. Skripnya ringan dan tidak mempengaruhi kecepatan secara signifikan.

Kesimpulan (Tegas)

Daftar isi otomatis adalah elemen wajib untuk blog yang menyajikan tutorial, panduan teknologi, dan artikel panjang. Dengan menambahkan container TOC, CSS, dan JavaScript, kamu dapat membuat daftar isi otomatis pada semua template default Blogger tanpa plugin atau template premium.

Selama artikel memiliki struktur heading yang benar, TOC akan bekerja sempurna. Implementasi ini meningkatkan kenyamanan pembaca, memperbaiki navigasi, serta memberi dampak positif bagi SEO keseluruhan blog.

Artikel ini memberi panduan paling lengkap dan sistematis untuk membuat daftar isi otomatis di Blogger. Setelah kamu memasang semua kodenya, kamu tidak perlu memasukkan TOC secara manual lagi—semuanya berjalan otomatis dan siap mendukung kualitas kontenmu.

Posting Komentar untuk "Cara Membuat Daftar Isi Otomatis di Blogger: Panduan Lengkap untuk Template Default"

Posting Komentar