Cara Membuat Daftar Isi di dalam Postingan / Artikel Blog

Daftar isi:

1. Apa itu daftar isi postingan ?
2. Proses pembuatan daftar isi
3. Pemasangan pada postingan
4. Tips dan Informasi tambahan

1. Apa itu daftar isi postingan ?

Daftar isi postingan adalah daftar link yang (umumnya) ditempatkan di bagian awal postingan / artikel yang mengarah ke bagian-bagian / poin pembahasan tertentu. Untuk contoh, lihat daftar isi dibagian atas postingan ini.

Selain akan memudahkan pembaca dalam menjelajahi dan memahami poin-poin dalam postingan, pembuatan daftar isi pada postingan juga akan meningkatkan daya tarik awal kepada pembaca. Ya, dengan menampilkan poin-poin penting pada daftar isi, pembaca dapat dengan mudah mengetahui hal apa saja yang akan dibahas di dalam postingan tersebut. Hal ini tentunya juga akan meningkatkan daya tarik awal yang baik, terlebih lagi jika apa yang anda sampaikan pada daftar isi merupakan poin-poin yang memang dicari oleh pembaca.

Selain manfaat diatas, pembuatan daftar isi ini juga akan memungkinkan postingan tampil lebih menarik di hasil penelusuran mesin pencari. Untuk beberapa kasus, mesin pencari google akan menampilkan daftar isi ini pada hasil pencarian. Hal ini secara bersamaan akan membuat postingan anda terlihat lebih menarik dan profesional.

Pesan:
Pada halaman ini, anda akan menjumpai beberapa hal terkait coding HTML. Untuk sekarang, blog wiBlogger.com ini masih belum menerbitkan materi seputar coding. Beberapa hal mungkin tidak dijelaskan secara mendalam. Untuk itu, manfaatkan pencarian google terkait hal apapun yang anda butuhkan. Anda juga bisa bertanya melalui kolom komentar dibawah terkait hal apapun seputar pembuatan daftar isi.

2. Cara membuat daftar isi di dalam postingan

Kembali pada pengertian daftar isi postingan diatas, ini adalah link yang mengarah ke bagian-bagian tertentu (pada halaman yang sama). Dalam hal ini, poin penting yang harus anda ketahui adalah bagaimana cara membuat sebuah link yang mengarah pada bagian tertentu. Adapun secara garis besar, proses pembuatan link ini adalah sebagai berikut:

1. Langkah 1:
   Berikan ID unik pada tag pembungkus untuk elemen yang hendak disertakan pada daftar isi.
2. Langkah 2:
   Buat link dengan URL tujuan yang mengandung Anchor dengan nama ID elemen yang telah didefinisikan pada langkah 1.

Untuk lebih mudahnya, disini saya misalkan format postingan yang akan dibuat adalah sebagai berikut:

Pada contoh diatas, link pada daftar isi diarahkan pada setiap elemen dengan tag heading h2.

Langkah 1: memberikan ID unik pada elemen

Pada antarmuka pembuatan postingan, beralih ke mode HTML dan berikan ID unik pada elemen yang hendak dijadikan target pada link daftar isi (dalam contoh ini adalah setiap elemen heading h2). Berikut adalah contoh tag HTML sebelum dan setelah diberikan atribut ID.

Tag H2 tanpa ID

<h2>Text</h2>

Tag H2 dengan ID

<h2 id='daftarisi-1'>Text</h2>

Postingan terkait:
Mengenal antarmuka pembuatan postingan Blogger - (Dasar)
Cara membuat postingan yang SEO - (Rangkuman SEO)

Hal penting yang harus anda ketahui adalah ID harus bersifat unik. Dengan kata lain, setiap ID harus berbeda dengan ID lainnya (dalam satu halaman). Anda bisa membuat ID untuk kebutuhan daftar isi ini dengan format yang konsisten, seperti misalnya daftarisi-1, daftarisi-2, dan seterusnya.

Pemberian ID tidak hanya terbatas pada tag h2 saja, anda bisa memberikan ID pada semua tag HTML, baik itu div, img, dan lain sebagainya.

Langkah 2: Membuat link yang mengarah pada elemen dengan ID tertentu

Selanjutnya, setelah setiap elemen yang dikehendaki telah memiliki ID unik, buat link dengan URL tujuan yang mengarah pada elemen tersebut. Adapun pembuatan link jenis ini dilakukan dengan cara mengisi URL tujuan dengan anchor berupa ID elemen yang dikehendaki.

Link dengan anchor

<a href='#daftarisi-1'>Text</a>

Lebih jauh tentang URL dan bagian-bagian URL bisa anda baca pada halaman: Pengertian dan bagian-bagian URL.

3. Pemasangan daftar isi pada postingan

Sampai paragraf ini, anda telah mengetahui bagaimana cara membuat link yang mengarah ke bagian tertentu. Selanjutnya, anda tinggal meletakkan daftar link yang anda buat dibagian atas postingan (atau dimanapun sesuai keinginan). Agar tampilan link adalah berupa daftar, Anda bisa mendefinisikan daftar isi ini dengan menggunakan elemen ol atau ul.

Contoh format penulisan daftar isi

<ol>

<li><a href='#daftarisi-1'>Text</a></li>

<li><a href='#daftarisi-2'>Text</a></li>

<li><a href='#daftarisi-3'>Text</a></li>

</ol>

Pada antarmuka pembuatan postingan, beralih ke mode HTML. Letakkan kode yang telah diformat seperti diatas pada bagian manapun yang anda kehendaki, dalam hal ini, saya meletakkan daftar isi ini dibagian paling atas postingan. Tampilan daftar isi dengan HTML diatas akan mengikuti style CSS pada tema anda.

Penting ...!

Ketika HTML daftar isi telah dibuat seperti gambar diatas (melalui mode HTML), jika anda beralih ke mode Compose, sistem blogger akan secara otomatis menambahkan path URL dengan URL dashboard blog anda. Dalam kasus ini, URL link yang tadinya hanya berupa #namaid akan berubah menjadi url-dashboard#namaid. Kurang lebih seperti berikut:

Contoh:

<a href='https://www.blogger.com/blogger.g?blogID=123123123123123#namaid'>Text</a>

Karena perubahan ini, sudah pasti daftar isi tidak akan bekerja. Oleh karena itu, proses pembuatan daftar isi ini sebaiknya dilakukan pada tahap akhir dan pastikan anda menerbitkan postingan anda pada saat anda dalam antarmuka mode HTML.

Berikut adalah beberapa informasi dan tips lainnya terkait pembuatan daftar isi:

• Tip:
  Definisikan ID dengan format yang konsisten untuk setiap bagian yang hendak disertakan pada daftar isi. Misal daftarisi-1, daftarisi-2, daftarisi-3 dan seterusnya.
• Info:
  Terkait pendefinisian ID, untuk anda yang masih belum begitu mengenal bahasa HTML, anda mungkin bingung tentang apa yang dimaksud dengan ID Unik. Dalam hal ini, sautu ID harus berbeda dengan ID lainnya pada halaman atau postingan yang sama. Dengan kata lain, anda hanya bisa menggunakan nama ID tertentu sebanyak satu kali dalam satu postingan. Hal yang perlu diketahui disini adalah ruang lingkup unik ini hanya berlaku per-halaman. Saya misalkan jika pada suatu postingan anda mendefinisikan ID dengan nama daftarisi-1 dan daftarisi-2, untuk postingan yang akan anda terbitkan selanjutnya, anda tetap bisa menggunakan ID daftarisi-1 dan daftarisi-2. Ya, sifat unik ini hanya berlaku per-halaman (bukan semua halaman).
• Tip:
  Untuk lebih mudahnya, anda bisa menyertakan format penulisan HTML daftar isi diatas pada Template Entri.

Share this post