Untuk membuat daftar isi manual di Blogger, tambahkan tautan seperti href="#toc-persiapan", lalu pasangkan dengan subjudul yang memiliki id="toc-persiapan". Browser akan membawa pembaca ke bagian tersebut pada artikel yang sama. Anda dapat menyiapkannya melalui HTML isi postingan tanpa memasang skrip atau menyunting template.
Daftar isi berguna ketika artikel mempunyai beberapa bagian yang memang ingin dituju pembaca. Sebelum menambahkannya, periksa apakah tema sudah menyediakan daftar isi otomatis. Hindari menampilkan dua daftar yang membingungkan atau mempunyai tujuan berbeda.
1. Tentukan subjudul yang akan menjadi tujuan
Susun alur tulisan terlebih dahulu. Untuk tutorial mengganti template, misalnya, bagian pentingnya dapat berupa persiapan, pemasangan, dan pengujian. Pilih bagian utama yang membantu pembaca menemukan tahap pekerjaan; tidak semua paragraf harus masuk daftar isi.
Gunakan tingkat subjudul yang sesuai. Jika judul postingan sudah ditampilkan tema sebagai H1, mulailah bagian utama isi dengan H2 dan gunakan H3 untuk rincian di bawahnya. Panduan heading MDN menjelaskan fungsi tingkatan heading dalam struktur halaman. Jangan menambah H1 lain hanya untuk memberi tulisan lebih besar.
Anda dapat menyiapkan bagian pendukung seperti pencadangan Blogger sebelum mengganti template. Pastikan isi setiap bagian sudah ada sebelum menautkannya dari daftar isi.
2. Pasangkan setiap tautan dengan ID yang unik
Pada tautan, karakter # menandai fragmen tujuan. Nilai sesudahnya harus cocok persis dengan ID elemen yang dituju. Dokumentasi elemen anchor MDN memperlihatkan cara menghubungkan tautan dengan bagian dalam halaman yang sama.
Menurut dokumentasi atribut ID, nilainya harus unik dalam satu dokumen dan tidak mengandung spasi ASCII. Untuk pekerjaan sehari-hari, nama singkat dengan huruf kecil serta tanda hubung mudah diperiksa. Awalan toc- pada contoh ini adalah pilihan penamaan, bukan syarat HTML.
Berikut contoh lengkap untuk isi postingan. Ganti teks contoh dengan materi artikel Anda, sambil mempertahankan pasangan href dan id.
<nav aria-label="Daftar isi artikel">
<p><strong>Daftar isi</strong></p>
<ol>
<li><a href="#toc-persiapan">Persiapan</a></li>
<li><a href="#toc-pemasangan">Pemasangan</a></li>
<li><a href="#toc-pengujian">Pengujian</a></li>
</ol>
</nav>
<h2 id="toc-persiapan">Persiapan</h2>
<p>Tulis langkah persiapan di sini.</p>
<h2 id="toc-pemasangan">Pemasangan</h2>
<p>Tulis langkah pemasangan di sini.</p>
<h2 id="toc-pengujian">Pengujian</h2>
<p>Tulis langkah pengujian di sini.</p>Pada contoh itu, tautan #toc-pengujian mempunyai satu tujuan, yaitu subjudul dengan ID toc-pengujian. Jika Anda mengubah salah satunya menjadi nama lain, perbarui pasangannya juga. Jangan menyalin ID yang sama ke dua subjudul berbeda.
3. Masukkan melalui tampilan HTML postingan
Buka postingan yang ingin dilengkapi, lalu simpan salinan isinya sebelum menyunting. Alihkan mode editor ke Tampilan HTML atau HTML view. Nama dan letak kontrol dapat berbeda mengikuti antarmuka akun. Pekerjaan ini berada di editor postingan, bukan pada Edit HTML tema.
Letakkan daftar tautan setelah pengantar atau sebelum bagian utama. Tambahkan ID pada subjudul yang sudah ada. Jika artikel telah mempunyai H2, cukup sunting tag pembukanya; tidak perlu menyalin subjudul contoh sehingga isi menjadi ganda. Periksa kembali tag penutup setelah penyuntingan.
Panduan pengelolaan postingan Blogger menjelaskan penyimpanan draf dan penggunaan Pratinjau. Simpan pekerjaan sebagai draf, kemudian periksa hasilnya. Jika kode justru terlihat sebagai tulisan biasa, tinjau mode editor dan cara penempelannya sebelum melanjutkan.
4. Tulis nama tautan yang menjelaskan tujuan
Gunakan teks yang mudah dipahami tanpa menebak. “Menguji menu pada ponsel” lebih jelas daripada “Bagian 3” ketika bagian tersebut membahas pemeriksaan navigasi. Nama tautan boleh ringkas, selama pembaca dapat memperkirakan isi tujuannya.
Panduan tautan Google Search Central menekankan penggunaan teks tautan yang deskriptif dan sesuai konteks. Elemen anchor dengan href juga merupakan bentuk tautan HTML yang dapat dikenali. Daftar isi contoh memakai tautan navigasi biasa, sehingga tidak memerlukan tombol yang hanya bekerja melalui JavaScript.
Label navigasi aria-label="Daftar isi artikel" pada contoh membantu memberi nama area navigasinya. Pertahankan urutan daftar mengikuti urutan bagian pada artikel. Untuk penerapan tautan yang lebih luas, gunakan panduan judul, deskripsi, dan internal link Blogger.
5. Uji pada ponsel dan dengan keyboard
Di pratinjau, klik setiap tautan dan perhatikan subjudul yang dituju. Gunakan artikel dengan isi yang cukup panjang agar perpindahannya terlihat. Jangan hanya menguji item pertama; kesalahan salin biasanya baru terlihat ketika tujuan berikutnya diperiksa.
Pada komputer, gunakan tombol Tab untuk mencapai tautan daftar isi, lalu Enter untuk mengaktifkannya. Pastikan posisi fokus dapat terlihat dan tautan mempunyai urutan yang masuk akal. Pada HP, periksa apakah teks tautan mudah disentuh dan tidak tertutup iklan atau elemen melayang.
Amati juga posisi subjudul setelah halaman bergulir. Jika tertutup header tetap, catat masalah tampilan tersebut untuk ditinjau bersama pengembang tema. Tutorial ini cukup menggunakan HTML isi artikel; penyesuaian tampilan tambahan perlu diperiksa sebagai pekerjaan tersendiri.
Pemeriksaan daftar isi dapat digabungkan dengan checklist pengujian template portal berita agar alur membaca keseluruhan tetap nyaman.
6. Rawat daftar isi saat artikel berubah
Daftar isi manual perlu diperiksa ketika subjudul ditambah, dipindahkan, atau dihapus. Teks subjudul boleh diperbarui tanpa mengganti ID jika tujuannya tetap sama. Simpan catatan pasangan tautan dan ID agar pemeriksaan berikutnya lebih mudah.
| Gejala | Yang diperiksa |
|---|---|
| Tautan tidak menuju subjudul | Kesamaan ID dan nilai sesudah tanda #. |
| Tujuan terasa keliru | ID yang mungkin terpasang pada elemen lain. |
| Isi muncul dua kali | Subjudul contoh yang belum digabung dengan isi lama. |
| Daftar sudah tidak sesuai urutan | Susunan tautan setelah pemindahan bagian artikel. |
Pahami fungsi fragmen terhadap alamat artikel
Dokumentasi fragmen URI MDN menjelaskan bahwa bagian setelah # diproses oleh klien, seperti browser, dan tidak dikirim ke server ketika meminta sumber daya. Pada daftar isi ini, fragmen menunjuk bagian dalam artikel yang sama.
Karena itu, menambahkan beberapa anchor tidak sama dengan menerbitkan beberapa halaman artikel baru. Gunakan daftar isi untuk membantu navigasi pembaca, tanpa menjanjikan pengindeksan lebih cepat atau peningkatan ranking. Kualitas penjelasan serta kejelasan susunan tulisan tetap perlu disiapkan.
Pertanyaan yang sering diajukan
Apakah daftar isi ini membutuhkan skrip?
Tidak. Contoh memakai tautan fragmen dan ID HTML untuk berpindah ke bagian dalam artikel.
Apakah nama ID harus sama dengan judul subbab?
Tidak harus. Pilih nama yang jelas, unik, tanpa spasi, dan cocok dengan tujuan pada tautannya.
Apakah setiap artikel perlu daftar isi?
Tidak. Gunakan ketika beberapa bagian tulisan memang membantu pembaca memilih titik mulai atau kembali ke penjelasan tertentu.
Komentar
Posting Komentar