Cara Membuat Daftar isi di Postingan Agar Blog Lebih Menarik

Cara Membuat Daftar isi di Postingan Blog
ARDINTORO |dot| COM - Hae Sobat jumpa lagi di blog ini. Pada kesempatan kali ini saya akan membagikan cara membuat daftar isi di dalam postingan blog, sebelum masuk pada pembahasan alangkah baiknya Sobat siapkan dulu teh, kopi atau makanan ringan dulu ya hehe. Karena sebentar kita akan berurusan dengan kode html, biar nggak terlalu mumet.

 

1. Pengertian daftar isi ?


  • Apa sih daftar isi di postingan itu?
  • Seberapa penting, sebuah postingan blog di pasang daftar isi?

Dua pertanyaan di atas mungkin sering terlintas ketika seseorang akan memasang daftar isi di postingan blog mereka, tak terkecuali dengan saya. Daftar isi di postingan adalah sebuah kalimat berupa link yang berfungsi menjadi petunjuk dari isi pokok sebuah artikel di postingan blog.

Seberapa penting? Sebuah postingan blog di pasang daftar isi? Menurut saya sangat penting, untuk membantu pembaca ketika mencari hal-hal atau informasi yang ada dalam postingan artikel, terutama pada postingan yang panjang, nggak lucu dong kalau ada pembaca yang sedang mencari informasi di blog kita, tetapi artikel yang kita sajikan terlalu panjang namun yang di cari pembaca sedikit. 

Itulah sebabnya perlu di pasang daftar isi di postingan, agar mengena pada inti yang di cari pembaca dan pembaca bisa betah berlama-lama di blog kita, karena merasa nyaman dengan di mudahkan. Karena pengunjung blog adalah raja.

2. Cara membuat daftar isi di dalam postingan


Kalian siapkan dulu artikel yang akan di pasangi daftar isi, selanjutnya membuat link yang mengarah pada bagian tertentu postingan dalam halaman yang sama, ada beberapa poin penting yang harus Sobat ketahui sebelum membuat link daftar isi.

Pertama: Buatlah ID unik pada kode HTML pembungkus yang nantinya akan di sisipkan pada daftar isi.

Kedua: Buatlah link dengan URL tujuan yang mengandung “anchor”, dengan nama ID yang di sesuaikan langkah pertama, yang nantinya link dengan URL ini di sisipkan pada setiap artikel yang di inginkan.

(1). Membuat ID unik pada elemen postingan artikel

Pada antar muka saat pembuatan postingan Kalian ubah dari mode “Compose” ke “Mode HTML”. Berikan ID unik pada elemen yang hendak di jadikan target pada link daftar isi. Hal penting yang harus Sobat ketahui bahwa ID harus bersifat unik, dengan kata lain, setiap ID harus berbeda dengan ID yang lain (dalam setiap postingan) dan dalam membuatnya harus terstruktur misalnya: definisi-1, definisi-2, definisi-3 dan seterusnya.

Contoh kode HTML: (Text Kalian isi judul atau yang lain, biasanya di tempatkan di awal paragraf setiap postingan).
 
<h2 id='daftarisi-1'>Text</h2>

(2). Membuat daftar isi dengan link yang mengarah pada elemen ID tertentu

Setelah Sobat menambahkan ID unik di setiap elemen dalam postingan yang di kehendaki selanjutnya buatlah 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 di kehendaki.

Contoh kode HTML: (Text Kalian isi, daftar isi postingan).

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

3. Cara pemasangan daftar isi pada postingan


Setelah Sobat sampai pada tahap ini. Kalian telah mengetahui cara membuat link yang mengarah pada bagian tertentu di dalam postingan, selanjutnya Kalian tinggal meletakkan daftar isi yang sudah di bungkus kode HTML tadi di atas postingan (atau di manapun sesuai keinginan). Agar daftar isi ini bisa tampil secara sempurna, maka Kalian tambahkan elemen “ol” atau “ul”.

Contoh format penulisan daftar isi yang sudah di tambahkan elemen “ol” atau “ul”.
 
<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>

4. Info penting


PENTING !
  • Letakkan kode HTML daftar isi yang kita buat pada terahir sekali, setelah semua pengeditan artikel selesai.
  • Agar kode HTML daftar isi yang kita buat bisa berfungsi dengan baik, maka letakkan dalam postingan melalui mode “HTML” dan langsung simpan.
  • Bila Kalian ubah ke mode “compose” maka sistim blogger akan secara otomatis mengubah link dengan dashboard Kalian, dan bisa di pastikan kode HTML daftar isi nggak berfungsi.


Selamat Mencoba

6 comments for "Cara Membuat Daftar isi di Postingan Agar Blog Lebih Menarik"

  1. Wah membuat daftarnya itu masih manual dimasukkan satu2

    ReplyDelete
  2. Manggut2 aja dulu wkwkwkwk...aku mau coba tapi kudu ada temen di sebelah, takur salah sih hihihi. Makasih infonya ya. Keren.

    ReplyDelete
    Replies
    1. hahaaha sama bu,, sy juga manggut2 duluu. paham nya nnti belakangan.

      yuk mmpir juga bu di blog sya

      www.gapurawisatajogja.xyz

      Delete
  3. Saya pernah buat daftar isi tp di postingan berikutnya ga bisa lagi..padahal langkah langkahnya sama..kenapa ya..terima kasih
    https://ipamts.com

    ReplyDelete
    Replies
    1. Artikelnya harus di seve di mode HTML jangan yang mode Compose, agar bisa berfungsi daftar isinya.

      Delete

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini, dengan Ketentuan :

1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi. Bila berkomentar nggak sesuai dengan kebijakan Blogger maka nggak di terbitkan!
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging 🙂.