wiblogger

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 yang mengarah ke bagian-bagian atau 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.



2. Cara membuat daftar isi di dalam postingan

Masih merujuk pada pengertian daftar isi postingan diatas, ini adalah link yang mengarah ke bagian-bagian tertentu. Dalam hal ini, poin penting yang harus anda ketahui adalah bagaimana cara membuat sebuah link yang mengarah ke 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:

cara membuat daftar isi postingan blog

Pada contoh diatas, link pada daftar isi diarahkan pada setiap elemen 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 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>

proses pembuatan daftar isi di dalam artikel blog


Tag H2 dengan ID
<h2 id='daftarisi-1'>Text</h2>



Postingan terkait:

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 elemen h2 saja, anda bisa memberikan ID pada semua elemen 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, 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.

HTML 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:

Link dengan anchor
<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. 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 HTML daftar isi diatas pada Template Entri.

Bagikan ke:

35 Komentar untuk:

Cara Membuat Daftar Isi di dalam Postingan / Artikel Blog
  1. mantap gan artikelnya,membantu saya.

    BalasHapus
  2. Makasih atas infonya, sekarang BossTutorial.com dah ada Daftar Isi Di Postingan

    BalasHapus
  3. makasih informasinya, dapat dijadikan panduan....

    BalasHapus
  4. Supaya bisa di hide dan unhide gimana ya om?

    BalasHapus
    Balasan
    1. Perlu javascript itu mas.

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
  5. Akhirnya nemu juga tutorial ini. makasih mas

    BalasHapus
  6. Agak membingungkan gan, tapi akan saya coba ya. Kunjnungan balik yaa

    BalasHapus
  7. Sangat sangat bermanfaat bagi seorang pemula di dunia bloging.
    Dengan adanya tutorial seperti ini menjadikan sebuah detail konten menjadi lebih menarik dan enak untuk dibaca bagi pengunjung

    BalasHapus
  8. Sesimpel itu ternyata caranya. Gua kira bakalan ribet banget. Makasih min

    BalasHapus
  9. sangat membantu dan mudah di mengerti

    BalasHapus
  10. Panduan yang bermanfaat, terima kasih telah menulis ini sebab sangat membantu...

    BalasHapus
  11. Wah bermanfaat artikel nya sekarang WangiSalafy,blogspot,com ada daftar isinya tp sempet gagal sih

    BalasHapus
  12. Cocok nih yang artikelnya panjang x lebar hehe

    BalasHapus
  13. mantap min, ini yang ane cari cari... pas buat artikel ane yg kebanyakan panjang ga jelas

    BalasHapus
  14. Terima kasih sdh sharing min, sepertinya ini bagus untuk navigasi dalam postingan. Mau nerapin langsung ke fahrinheit.com
    Sekali lagi terima kasih banyak min

    BalasHapus
  15. makasih banyak mas tutorialnya, jadi bisa nulis panjang di satu halaman

    BalasHapus
  16. saya telah membaca dan memahami tulisan ini dan telah saya praktekan di blog saya untuk membuat daftar isi dalam posting artikel blog sesuai kebutuhan saya
    terima kasih

    BalasHapus
  17. Sudah saya terapkan di salah satu artikel saya. Tapi scrollnya kok kurang tepat ya mas. Jadi ngarahnya pas di bawah heading atau kata yang dituju. ini artikelnya

    Mungkin ada yang salah dengan tag saya mas?

    BalasHapus
    Balasan
    1. It Karena mode header blognya mas (yg menutup Sebagian area atas). Pada prinsipnya sih udah bener.

      Solusinya, mas bisa letakkin element target sedikit diatas target sebenernya. Bisa dengan membuat tag div kosong (<div id='namaid'></div>). Letakkin tag tersebut sebelum target area (dikira2 aja posisinya).

      Hapus
    2. Terimakasih banyak mas....sangat membantu, ternyata div kosong bisa.

      Hapus
  18. dicoba dulu artikelnya.. makasih gan

    BalasHapus
  19. Bagus banget tips nya kak

    BalasHapus
  20. https://www.masterfisika.online/?m=1

    Maen2 lah ke blog ane kak

    BalasHapus
  21. Mau nanya dong, kenapa ya waktu saya klik daftar isinya malah mengarah ke halaman 404? Saya belum ngelakuin langkah 2, itu maksudnya bagaimana min? Membuat link anchor di bagian mananya? Mohon jawabannya min :(

    BalasHapus
    Balasan
    1. Eh udah min, ternyata kurang # hehe, makasih. Tapi kenapa ya kok waktu diklik ngarahnya agak ke bawah, gak pas di tulisan yang dilink in

      Hapus
    2. Mungkin kasusnya sama dengan mas Dzikir pikir diatas.

      Hapus
  22. daging nih pembahasannya. ini juga bisa diterapkan diberbagai entri post ya.

    BalasHapus
  23. Jadi tambah semangat belajar setelah baca artikel di Web blog ini.. Selalu menunggu updatan tutorialnya

    BalasHapus
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi