Cara Membuat Daftar isi di Postingan Agar Blog Lebih Menarik

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.

Daftar ISI

1. Pengertian daftar isi ?
2. Cara membuat daftar isi di dalam postingan
3. Cara pemasangan daftar isi pada postingan
4. Info Penting !

 

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.

Baca Juga: 7 Cara Menulis Artikel Agar Terus Semangat

Selamat Mencoba

Share :