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:

16 Komentar untuk:

Cara Membuat Daftar Isi di dalam Postingan / Artikel Blog
  1. Supaya bisa di hide dan unhide gimana ya om?

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

    BalasHapus
  5. 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
  6. 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
  7. 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
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