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/postingan (bukan per blog).
  • Tip:
    Untuk lebih mudahnya, anda bisa menyertakan HTML daftar isi diatas pada Template Entri.

Bagikan ke:

19 Komentar untuk:

Cara Membuat Daftar Isi di dalam Postingan / Artikel Blog
  1. 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
    3. Om kardinata, aku udah nerapin ini tapi belum berhasil masih meleset dibawah target/ heading, udah pake tagdiv kosong juga. atau mungkin masih salah pemakaiannya. bisa bantu?

      Hapus
    4. Itu mode header blognya fixed kan mas ?, Pake div kosong bisa, tinggal sesuaiin penempatannya.

      Pastiin antara div kosong dan target terdapat area setinggi elemet header yang terfixed. Kalau gak ada pemisah sama sekali, hasilnya bakalan sama saja (tetap kebawah. Mungkin kasus mas ya kek gini ^_^).

      Contoh kode 1:
      <div id='target-id'></div>
      <h2 class='target-heading'>....</h2>

      Keterangan kode 1
      Pada contoh kode diatas, hasilnya tetap sama (tetep kebawah). Hal ini karena gak ada pemisah (space) antara div dan heading.

      Contoh kode 2
      <div id='target-id'></div>
      <br/>
      <br/>
      <h2 class='target-heading'>....</h2>

      Keterangan contoh kode 2
      Terdapat pemisah antara div dan target sejauh 2x enter (new line). Pake metode ini untuk kasus heaer yang terfixed. Uktuk pemisah, ini gak harus pake tag br. Pemisah bisa apa aja, asalkan letak div dan heading berjarak minimal setinggi header.

      Contoh 3
      Paragraf sebelumnya. Quisque at finibus justo. Integer arcu neque, venenatis vitae neque non, rhoncus tincidunt purus. <span id='target-id'></span> Donec malesuada efficitur libero, pellentesque laoreet neque laoreet quis. Sed nec tempor libero. Proin pulvinar magna in turpis maximus, sed pulvinar urna blandit.


      <h2 class='target-heading'>....</h2>
      Quisque at finibus justo. Integer arcu neque, venenatis vitae neque non, rhoncus tincidunt purus. Donec malesuada efficitur libero, pellentesque laoreet neque laoreet quis. Sed nec tempor libero. Proin pulvinar magna in turpis maximus, sed pulvinar urna blandit.


      Contoh 3 diatas juga bisa, pastiin untuk menggunakan tag span jika hendak diletakkan pada sembarang tempat diantara text paragraf sebelumnya (agar gak ter-enter).

      Hapus
  2. 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
  3. daging nih pembahasannya. ini juga bisa diterapkan diberbagai entri post ya.

    BalasHapus
  4. Akhirnya ketemu juga tutorialnya, terimakasih.
    Saya mau tanya, cara agar ukuran gambar bisa pas di thumbnail bagaimana ya? Karena gambarnya kepotong. Silahkan lihat di www.trikteknologi.id

    BalasHapus
    Balasan
    1. Untuk thumbnail, saya cek emng theme yang digunain gak responsive thunbnail mas.

      Hapus
  5. Mas cara buat tabel gtu gmn? Seperti tulisam link dengan anchor / HTML daftar isi di atas

    BalasHapus
    Balasan
    1. Itu bukan table mas. Gak ada skill instannya. Pelajari HTML and CSS.

      Hapus
  6. Bingung di bagian Tips ID Mas, mungkin bisa dipermudah penyampaiannya dengan lebih di sederhanakan secara to the point

    BalasHapus
    Balasan
    1. Intinya, dalam satu postingan, setiap ID tidak boleh sama.

      Hapus
  7. gan saya udah coba secara tampilan berhasil namun ketika di klik daftar isinya malah ke halaman baru dan eror 404 page not found

    BalasHapus
    Balasan
    1. Itu salah URLnya mas, coba teliti URLnya

      Hapus
  8. Daftar isinya ini gak muncul di halaman home ya?

    BalasHapus
    Balasan
    1. Kalau posts yang ditampilkan dihalaman home dengan mode "readmore", iya gak tampil mas.

      Hapus
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