Artikel yang panjang akan lebih mudah dibaca jika pembaca dapat melihat gambaran isi dan langsung menuju bagian yang mereka butuhkan. Salah satu cara yang bisa digunakan adalah menambahkan daftar isi di dalam artikel.
Pada Blogger, daftar isi dapat dibuat secara manual menggunakan tautan menuju heading tertentu atau dibuat otomatis dengan JavaScript. Cara otomatis lebih praktis untuk blog yang sering menerbitkan artikel panjang karena daftar isi dapat membaca struktur heading pada halaman dan membuat navigasi berdasarkan heading tersebut.
Pada tutorial ini, kita akan membahas cara membuat daftar isi otomatis Blogger menggunakan HTML, CSS, dan JavaScript sederhana. Kode dapat ditempatkan langsung pada artikel sehingga tidak membutuhkan CSS eksternal. Selain tutorial, artikel ini juga membahas cara kerja TOC, penempatan yang tepat, tips penggunaan, serta kesalahan yang perlu dihindari.
Apa Itu Daftar Isi Blogger?
Daftar isi Blogger atau table of contents adalah kumpulan tautan yang mengarah ke bagian-bagian tertentu dalam sebuah artikel. Biasanya daftar isi mengambil judul dari heading seperti H2 dan H3 yang digunakan dalam konten.
Sebagai contoh, artikel tutorial yang memiliki beberapa pembahasan dapat menampilkan struktur seperti berikut:
- Apa Itu Daftar Isi Blogger?
- Persiapan Sebelum Membuat Daftar Isi
- Cara Membuat Daftar Isi Otomatis
- Cara Menempatkan Daftar Isi
- Kesalahan yang Perlu Dihindari
- FAQ
Setiap item dalam daftar tersebut dapat diklik sehingga pembaca dapat berpindah ke bagian artikel yang sesuai.
Mengapa Artikel Blogger Membutuhkan Daftar Isi?
Tidak semua artikel membutuhkan daftar isi. Untuk artikel yang sangat pendek, daftar isi justru bisa menjadi elemen yang tidak diperlukan. Namun, untuk tutorial, panduan, artikel referensi, atau pembahasan yang memiliki banyak bagian, daftar isi dapat membantu pembaca memahami struktur halaman.
Beberapa manfaat praktisnya antara lain:
- Memberikan gambaran mengenai pembahasan artikel.
- Membantu pembaca menemukan bagian tertentu dengan lebih cepat.
- Membuat artikel panjang memiliki navigasi yang lebih jelas.
- Mengurangi kebutuhan pembaca untuk menggulir halaman secara manual ketika mencari topik tertentu.
- Membantu membuat struktur artikel terlihat lebih terorganisir.
Cara Kerja Daftar Isi Otomatis Blogger
Daftar isi otomatis bekerja dengan membaca heading yang terdapat di dalam area artikel. JavaScript kemudian mengambil judul heading tersebut dan membuat daftar tautan berdasarkan urutannya.
Agar sistem dapat mengetahui tujuan setiap tautan, heading perlu memiliki atribut id. JavaScript dapat menambahkan ID tersebut secara otomatis jika heading belum memilikinya.
Secara sederhana, alurnya adalah:
- Artikel memiliki heading H2 dan H3.
- JavaScript membaca heading tersebut.
- Setiap heading diberikan ID jika belum memilikinya.
- JavaScript membuat tautan berdasarkan ID tersebut.
- Tautan dimasukkan ke dalam kotak daftar isi.
- Pembaca dapat mengklik tautan untuk menuju bagian artikel yang dipilih.
Persiapan Sebelum Membuat TOC Blogger
Sebelum memasang kode daftar isi otomatis, pastikan struktur artikel sudah menggunakan heading dengan benar. Jangan menggunakan teks biasa yang hanya dibuat tebal sebagai pengganti heading jika teks tersebut memang berfungsi sebagai judul bagian.
Gunakan H2 untuk Pembahasan Utama
Gunakan H2 untuk membagi artikel menjadi beberapa pembahasan utama. Misalnya artikel tentang Blogger dapat memiliki H2 seperti "Cara Membuat Daftar Isi" dan "Kesalahan yang Perlu Dihindari".
Gunakan H3 untuk Subpembahasan
Jika satu pembahasan utama memiliki beberapa bagian yang lebih kecil, gunakan H3 di bawah H2 yang sesuai. Struktur ini membuat hubungan antarbagian artikel lebih jelas.
Hindari Heading yang Tidak Perlu
Tidak semua kalimat perlu dijadikan heading. Gunakan heading ketika memang ada bagian pembahasan yang ingin dipisahkan. Struktur yang terlalu banyak dapat membuat daftar isi menjadi panjang dan kurang nyaman digunakan.
Cara Menambahkan Daftar Isi Otomatis di Artikel Blogger
Berikut salah satu cara membuat daftar isi otomatis langsung di dalam postingan Blogger. Metode ini menggunakan elemen HTML untuk tempat daftar isi dan JavaScript untuk membaca heading artikel.
Langkah 1: Buka Editor HTML Blogger
Buka dashboard Blogger, kemudian buat artikel baru atau buka artikel yang ingin diberi daftar isi. Pada editor postingan, gunakan mode HTML agar Anda dapat memasukkan kode secara langsung.
Sebaiknya lakukan pengeditan dengan hati-hati, terutama jika artikel sudah memiliki banyak kode HTML, gambar, tabel, atau elemen khusus lainnya.
Langkah 2: Tentukan Posisi Daftar Isi
Tempatkan kode daftar isi setelah pendahuluan atau sebelum pembahasan utama. Posisi tersebut biasanya cukup mudah ditemukan pembaca tanpa membuat daftar isi mengambil terlalu banyak ruang di bagian paling atas halaman.
Masukkan kode HTML berikut pada lokasi yang diinginkan:
<div id="toc-blogger" style="border:1px solid #ddd; padding:18px; margin:0 0 28px; border-radius:8px;"> <div style="font-weight:bold; margin:0 0 14px;">Daftar Isi</div> <ol id="toc-list" style="margin:0; padding-left:22px; line-height:1.8;"></ol> </div>
Elemen dengan ID toc-list akan menjadi tempat JavaScript memasukkan daftar tautan secara otomatis.
Langkah 3: Tambahkan JavaScript
Setelah kode HTML daftar isi, tambahkan JavaScript berikut. Script ini mencari heading H2 dan H3 di dalam konten artikel, kemudian membuat tautan menuju setiap heading.
<script>
document.addEventListener("DOMContentLoaded", function () {
var toc = document.getElementById("toc-list");
var container = document.querySelector(".post-body");
if (!toc || !container) return;
var headings = container.querySelectorAll("h2, h3");
if (!headings.length) {
var box = document.getElementById("toc-blogger");
if (box) box.style.display = "none";
return;
}
headings.forEach(function (heading, index) {
var id = heading.id;
if (!id) {
id = "toc-" + (index + 1);
heading.id = id;
}
var li = document.createElement("li");
var link = document.createElement("a");
link.href = "#" + id;
link.textContent = heading.textContent.trim();
li.appendChild(link);
toc.appendChild(li);
});
});
</script>
Kode tersebut menggunakan selector .post-body sebagai contoh area konten postingan. Nama class dapat berbeda pada template Blogger yang Anda gunakan. Jika template Anda menggunakan struktur konten yang berbeda, selector tersebut mungkin perlu disesuaikan.
Karena itu, jangan langsung menganggap satu kode akan cocok untuk semua template. Jika daftar isi tidak muncul, pemeriksaan struktur HTML template menjadi langkah penting.
Langkah 4: Simpan dan Pratinjau Artikel
Setelah kode dimasukkan, gunakan fitur pratinjau Blogger untuk melihat hasilnya. Periksa apakah daftar isi muncul dan apakah setiap item dapat diklik.
Cobalah beberapa tautan dalam daftar isi. Pastikan ketika diklik, halaman berpindah ke heading yang sesuai dan tidak mengarah ke bagian yang salah.
Membuat Daftar Isi yang Hanya Mengambil H2
Tidak semua artikel membutuhkan H2 dan H3 sekaligus. Jika artikel Anda hanya menggunakan H2 sebagai pembagian utama, daftar isi dapat dibuat lebih sederhana dengan hanya membaca elemen H2.
Pada kode JavaScript sebelumnya, bagian:
var headings = container.querySelectorAll("h2, h3");
dapat diubah menjadi:
var headings = container.querySelectorAll("h2");
Dengan perubahan tersebut, hanya heading H2 yang akan dimasukkan ke dalam daftar isi. Pilih struktur yang paling sesuai dengan panjang dan kompleksitas artikel Anda.
Cara Membuat Daftar Isi H2 dan H3 Lebih Terstruktur
Jika artikel memiliki banyak H2 dan H3, daftar isi sebaiknya memperlihatkan hubungan antara pembahasan utama dan subpembahasan. Hal ini membuat navigasi lebih mudah dipahami.
Contohnya, struktur artikel dapat dibuat seperti berikut:
H2: Apa Itu Daftar Isi Blogger?
H2: Cara Membuat Daftar Isi
H3: Menambahkan HTML
H3: Menambahkan JavaScript
H3: Menguji Daftar Isi
H2: Tips Menggunakan TOC
H2: Kesalahan yang Perlu Dihindari
Jika Anda ingin menampilkan H3 sebagai subitem di bawah H2, JavaScript perlu dibuat sedikit lebih kompleks karena harus mengetahui hubungan antara setiap H2 dan H3. Untuk artikel sederhana, daftar datar yang berisi H2 dan H3 secara berurutan juga sudah dapat digunakan.
Contoh Struktur Daftar Isi untuk Artikel Panjang
Berikut contoh pembagian struktur yang dapat digunakan pada artikel tutorial Blogger:
| Heading | Contoh | Fungsi |
|---|---|---|
| H1 | Cara Membuat Daftar Isi Otomatis di Artikel Blogger | Judul utama halaman |
| H2 | Apa Itu Daftar Isi Blogger? | Pembahasan utama |
| H2 | Cara Membuat Daftar Isi | Bagian tutorial |
| H3 | Menambahkan HTML | Sublangkah tutorial |
| H3 | Menambahkan JavaScript | Sublangkah tutorial |
| H2 | Tips Menggunakan Daftar Isi | Informasi tambahan |
Tips agar Daftar Isi Blogger Tetap Nyaman Digunakan
Daftar isi sebaiknya membantu navigasi, bukan justru membuat pembaca bingung. Beberapa hal berikut dapat diperhatikan:
- Gunakan judul heading yang jelas dan deskriptif.
- Jangan membuat terlalu banyak heading hanya untuk memperpanjang daftar isi.
- Tempatkan daftar isi pada lokasi yang mudah ditemukan.
- Pastikan setiap tautan mengarah ke bagian yang benar.
- Gunakan tampilan sederhana agar daftar isi tidak mengalahkan isi artikel.
- Uji daftar isi menggunakan HP, terutama jika mayoritas pembaca menggunakan perangkat mobile.
- Pastikan kode tidak mengganggu elemen lain dalam artikel.
Kesalahan yang Perlu Dihindari Saat Membuat TOC Blogger
1. Menggunakan Heading Secara Tidak Teratur
Jika struktur heading tidak jelas, daftar isi juga menjadi kurang nyaman digunakan. Sebaiknya gunakan H2 sebagai bagian utama dan H3 sebagai subbagian ketika memang diperlukan.
2. Memasukkan Semua Elemen Judul ke Daftar Isi
Jika JavaScript membaca terlalu banyak elemen heading, daftar isi dapat menjadi sangat panjang. Tentukan heading mana yang memang diperlukan untuk navigasi.
3. Tidak Menguji Link Daftar Isi
Daftar isi yang terlihat bagus belum tentu semua tautannya berfungsi dengan benar. Setelah memasangnya, klik beberapa atau seluruh item untuk memastikan tujuan tautannya sesuai.
4. Mengandalkan Satu Selector untuk Semua Template
Struktur HTML setiap template dapat berbeda. Selector .post-body yang digunakan dalam contoh mungkin perlu disesuaikan dengan template tertentu.
5. Memasang Kode Tanpa Memahami Struktur Artikel
Kode otomatis tetap membutuhkan struktur konten yang benar. Jika artikel tidak menggunakan heading dengan baik, daftar isi tidak akan memberikan hasil navigasi yang optimal.
Apakah Daftar Isi Blogger Membantu SEO?
Daftar isi terutama dibuat untuk membantu navigasi pembaca. Dengan adanya tautan menuju bagian tertentu, pembaca dapat berpindah ke pembahasan yang mereka cari tanpa harus menggulir seluruh artikel secara manual.
Dari sisi struktur halaman, penggunaan heading yang jelas dan terorganisir juga membantu membuat konten lebih mudah dipahami. Namun, jangan menganggap pemasangan daftar isi saja akan membuat artikel otomatis mendapatkan posisi tertentu di mesin pencari.
Fokus utama tetap pada kualitas isi, relevansi dengan kebutuhan pembaca, struktur halaman yang baik, serta pengalaman menggunakan halaman tersebut.
FAQ tentang Daftar Isi Blogger
Apa itu daftar isi Blogger?
Daftar isi Blogger adalah navigasi yang berisi tautan menuju bagian tertentu dalam sebuah artikel. Biasanya item daftar isi dibuat berdasarkan heading yang terdapat di dalam konten.
Apa itu daftar isi otomatis Blogger?
Daftar isi otomatis Blogger adalah daftar isi yang dibuat menggunakan script untuk membaca heading artikel dan menghasilkan tautan navigasi secara otomatis. Dengan metode ini, Anda tidak perlu membuat setiap tautan satu per satu.
Apakah daftar isi bisa dibuat tanpa plugin?
Bisa. Pada Blogger, daftar isi dapat dibuat langsung menggunakan HTML dan JavaScript tanpa memasang plugin seperti pada beberapa platform lain. Kode tetap perlu disesuaikan jika struktur template berbeda.
Apakah semua artikel harus menggunakan daftar isi?
Tidak. Daftar isi lebih berguna untuk artikel yang cukup panjang atau memiliki beberapa pembahasan utama. Untuk artikel pendek dengan satu pembahasan sederhana, daftar isi mungkin tidak diperlukan.
Mengapa daftar isi saya tidak muncul di Blogger?
Penyebabnya dapat berasal dari selector konten yang tidak sesuai, JavaScript tidak berjalan, struktur HTML artikel berbeda, atau tidak ada heading yang ditemukan oleh script. Periksa kode dan struktur HTML template yang digunakan.
Apakah daftar isi Blogger bisa digunakan di HP?
Bisa. Namun, tampilan daftar isi perlu dibuat responsif dan diuji pada layar kecil. Pastikan teks tautan mudah dibaca dan area klik cukup nyaman digunakan.
Apakah daftar isi Blogger otomatis memperbarui isinya?
Jika menggunakan script yang membaca heading secara otomatis ketika halaman dimuat, daftar isi dapat mengikuti heading yang terdapat pada artikel tersebut. Jika struktur heading berubah, hasilnya bergantung pada cara script dibuat.
Kesimpulan
Menambahkan daftar isi Blogger dapat menjadi solusi sederhana untuk membuat artikel panjang lebih mudah dinavigasi. Pembaca dapat melihat struktur pembahasan dan menuju bagian tertentu tanpa harus menggulir halaman dari awal sampai akhir.
Untuk membuat daftar isi otomatis Blogger, Anda dapat menggunakan kombinasi HTML dan JavaScript. Script membaca heading seperti H2 dan H3, kemudian membuat tautan yang mengarah ke bagian artikel yang sesuai.
Namun, daftar isi hanyalah salah satu bagian dari struktur artikel. Sebelum memasangnya, pastikan artikel sudah menggunakan heading secara teratur, memiliki paragraf yang mudah dibaca, dan memberikan informasi yang benar-benar dibutuhkan pembaca.
Jika digunakan pada artikel yang memang membutuhkan navigasi, TOC Blogger dapat membuat pengalaman membaca menjadi lebih terstruktur tanpa harus membuat desain artikel menjadi rumit.