Cara Membuat Daftar Isi Otomatis di Artikel Blogger
Cara Membuat Daftar Isi Otomatis di Artikel Blogger
Daftar isi (Table of Contents / ToC) adalah elemen penting dalam sebuah artikel panjang, terutama untuk blog yang membahas topik mendalam.
Selain membantu pembaca menavigasi isi artikel dengan mudah, daftar isi juga dapat meningkatkan SEO karena Google sering menampilkan bagian daftar isi di hasil pencarian (featured snippet).
Nah, berikut panduan lengkap cara membuat daftar isi otomatis di artikel Blogger tanpa perlu plugin tambahan!
---
🧠1. Apa Itu Daftar Isi Otomatis di Blogger?
Daftar isi otomatis adalah fitur yang menampilkan tautan ke setiap subjudul (heading) dalam artikel secara otomatis.
Ketika pengunjung mengklik salah satu judul di daftar isi, halaman akan langsung menggulir ke bagian tersebut.
Fitur ini sangat berguna untuk:
* Artikel panjang atau tutorial langkah demi langkah
* Konten edukasi
* Panduan SEO dan teknologi
---
⚙️ 2. Mengapa Daftar Isi Penting untuk SEO Blogger
Berikut alasan mengapa ToC wajib ada di artikel:
* ✅ Meningkatkan pengalaman pembaca (UX)
Pembaca dapat langsung melompat ke bagian yang dibutuhkan.
* ✅ Memperkuat struktur artikel
Google dapat mengenali hierarki konten dengan lebih baik.
* ✅ Meningkatkan peluang muncul di rich snippet Google
Judul-judul subbagian bisa tampil di hasil pencarian.
* ✅ Meningkatkan waktu baca halaman
Karena navigasi lebih mudah, bounce rate cenderung menurun.
---
🛠️ 3. Cara Membuat Daftar Isi Otomatis di Blogger
Berikut langkah-langkah mudahnya:
Langkah 1: Buka Dashboard Blogger
Masuk ke akun Blogger Anda, lalu buka menu “Tema” (Theme).
Langkah 2: Edit HTML Tema
Klik tanda panah ▼ di sebelah tombol “Sesuaikan” (Customize), kemudian pilih “Edit HTML”.
Langkah 3: Tambahkan CSS untuk Tampilan ToC
Cari tag `<head>` dan tambahkan kode berikut di bawahnya:
```html
<style>
.toc-title {
font-weight: bold;
margin-bottom: 10px;
}
.toc-container {
background: #f8f9fa;
border: 1px solid #ddd;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
}
.toc-container ul {
list-style: none;
margin: 0;
padding-left: 10px;
}
.toc-container li {
margin: 5px 0;
}
.toc-container a {
color: #0073e6;
text-decoration: none;
}
.toc-container a:hover {
text-decoration: underline;
}
</style>
```
Kode di atas berfungsi untuk membuat tampilan daftar isi yang rapi dan profesional.
---
Langkah 4: Tambahkan Script ToC Otomatis
Setelah CSS, tambahkan script JavaScript di bawah tag `</head>`:
```html
<script>
document.addEventListener("DOMContentLoaded", function() {
var toc = document.getElementById("toc");
if (!toc) return;
var headings = document.querySelectorAll("h2, h3");
var tocList = "<div class='toc-container'><div class='toc-title'>Daftar Isi</div><ul>";
headings.forEach(function(h, i) {
var id = "heading-" + i;
h.setAttribute("id", id);
tocList += "<li><a href='#" + id + "'>" + h.textContent + "</a></li>";
});
tocList += "</ul></div>";
toc.innerHTML = tocList;
});
</script>
```
Script ini secara otomatis mendeteksi semua judul H2 dan H3 di artikel Anda dan membuat tautan menuju ke sana.
---
Langkah 5: Sisipkan ToC di Artikel
Setiap kali Anda menulis artikel, tambahkan kode berikut di awal konten:
```html
<div id="toc"></div>
```
Setelah artikel dipublikasikan, daftar isi akan muncul secara otomatis di bagian tersebut.
---
🎨 4. Tips Tambahan untuk Tampilan Profesional
* Gunakan warna senada dengan tema blog Anda.
* Tambahkan animasi scroll smooth agar perpindahan ke subjudul terasa halus:
```css
html {
scroll-behavior: smooth;
}
```
* Pastikan struktur heading di artikel rapi (H2 untuk subjudul utama, H3 untuk sub-subjudul).
---
✅ 5. Kesimpulan
Membuat daftar isi otomatis di Blogger sangat mudah dan bermanfaat.
Dengan menambahkan beberapa baris kode HTML, CSS, dan JavaScript, Anda bisa:
* Meningkatkan kenyamanan pembaca
* Memperkuat SEO
* Memberikan kesan profesional pada blog Anda
Jika dilakukan dengan benar, daftar isi ini akan membantu artikel Anda lebih mudah bersaing di hasil pencarian Google.
Posting Komentar