Membuat Daftar Isi Atau Table Of Contents (TOT) Pada Postingan Blog

Daftar Isi

1. Pentingnya Daftar Isi.
2. Cara Membuat Daftar Isi.
3. Cara memasang daftar isi pada postingan
4. Catatan penting

Daftar Isi atau Table of Contents (TOT) sudah biasa kita jumpai pada sebuah karya tulis seperti buku, artikel, skripsi, tesis, jurnal dan lain sebagainya. Daftar Isi bahkan wajib adanya dan merupakan kelengkapan yang harus ada pada bagian halaman awal sebuah karya tulis ilmiah. Dari daftar isi inilah pembaca mengetahui kerangka isi sebuah karya tulis. Begitu juga dengan postingan atau artikel yang kita buat di blog atau website dapat dibuat Daftar Isi.

1. Pentingnya Daftar Isi

Daftar Isi diperlukan bilamana artikel yang kita buat biasanya mempunyai durasi yang panjang dan terdiri dari beberapa pokok pikiran yang harus dituangkan dalam sebuah artikel. Daftar isi ini bukanlah daftar isi biasa, tetapi dengan klik Daftar Isi, otomatis akan meloncat pada menu yang dituju.

Disamping itu Daftar Isi menjadi penting karena setiap pembaca mempunyai karakter yang tidak sama dalam hal membaca. Banyak pembaca yang cepat merasa bosan membaca artikel yang panjang, sehingga dengan membaca daftar isi dapat memudahkan mencari hal-hal yang dibutuhkan dengan cepat tanpa harus membaca keselurahan isi artikel.

Daftar isi bisa memberikan daya tarik awal terhadap pembaca untuk menelusuri lebih lanjut postingan yang kita buat. Kita tahu bahwa daftar isi memuat hal-hal atau poin-poin penting apa yang akan dikupas dalam sebuah karya tulis. Ketertarikan awal ini penting, ibarat seorang pemuda yang jatuh cinta pada pandangan pertama. Dia akan terus mencari tahu siapa gadis itu....heee.

Daftar isi juga bisa memberikan gambaran yang lebih keren dan profesionalitas dari sebuah blog, sehingga pembaca merasa betah berkunjung dan berlama-lama mencari hal-hal baru yang mungkin ia butuhkan. Hal ini penting bagi sebuah blog karena terkait dengan Bounce Rate dan Page Rank dari sebuah situs.

2. Cara Membuat Daftar Isi

Membuat Daftar Isi pada prinsipnya sama dengan kalau kita ingin memuat gambar pada blog, yaitu dengan membuat Link atau  URL gambar terlebih dahulu, dengan atribut < img src="#">. Sedangkan pada Daftar Isi, Linknya harus kita buat sendiri dengan membuat alamat atau ID unik terhadap target (daftar isi) yang akan kita tampilkan diawal tulisan kita, kemudian menambahkan link dengan atribut < a href="#">Link1</a>

Lebih jelasnya lihat contoh postingan yang telah kita buat dibawah ini:

Gambar 1

Setelah kita tahu targetnya mulailah kita membuat tag HTMLnya dengan langkah-langkah sebagai berikut:

Langkah pertama:

Membuat ID unik atau berbeda pada elemen yang akan dijadikan target sebagai daftar isi. Pada contoh dibawah ini ada dua target. Jika targetnya ada lima, maka buat sebanyak lima dengan id yang berbeda tetapi penamaannya harus tetap konsisten seperti daftarisi-1, daftarisi-2 dan seterusnya.

Penamaan ini hanya berlaku di halaman ini saja, anda bisa menggunakannya kembali pada postingan berikutnya. Penambahan tag h3 pada target hanyalah menyangkut besar kecilnya tulisan. 

<h3 id="daftarisi-1"><p>Pentingnya Daftar Isi.</p></h3>

<h3 id="daftarisi-2"><p>Cara Membuat Daftar Isi.</p></h3>

Keterangan:

h3 adalah besar kecilnya tulisan pada heading.

id adalah penamaan elemen dengan atribut unik atau berbeda.

p adalah elemen yang menunjukkan paragraf sebuah teks.   

Langkah kedua:

Membuat Link URL tujuan atau target dengan elemen a ( anchor ) diikuti dengan nama ID unik atau berbeda sebagaimana langkah pertama. Agar tampilan link ini berupa daftar yang tersusun kebawah, maka bisa anda tambahkan elemen ol atau ul.

<ol>

<li><a href="#daftarisi-1">Pentingnya Daftar Isi.</a></li>

<li><a href="#daftarisi-2">Cara Membuat Daftar Isi.</a></li>

</ol>

Keterangan:

ol adalah singkatan dari ordered list, suatu tag untuk mengurutkan daftar dengan menggunakan angka.

li singkatan dari list, suatu tag yang digunakan untuk menampilkan data secara berurutan ke bawah

a singkatan dari anchor adalah element digunakan untuk mendefinisikan sebuah hyperlink.

href adalah atribut untuk menentukan alamat URL tujuan dari link.

3. Cara memasang daftar isi pada postingan

Pada langkah pertama dan kedua pada poin 2, kita telah membuat id unik dan alamat linknya. Selanjutnya bagaimana cara kita memasang daftar isi pada postingan yang telah kita buat.

Tahap 1.

Pada halaman antarmuka pembuatan postingan, ubah ke mode HTML. Kemudian kita cari paragraf atau teks yang menjadi target yang akan kita jadikan sebagai daftar isi sebagaimana contoh pada gambar 1 diatas. Tampilan mode HTMLnya akan berubah seperti gambar dibawah ini setelah kita pilah targetnya menjadi satu baris tersendiri.

Gambar 2

Tahap 2.

ID unik yang sudah kita buat pada Langkah pertama diatas masukkan pada target 1. dan 2. sehingga tampilan HTML berubah menjadi seperti dibawah ini:

Gambar 3

Tahap 3.

Membuat HTML Daftar Isi  yang akan diletakkan pada awal postingan dibawah judul dengan memasukkan Link target yang sudah kita buat pada Langkah kedua diatas.

<h3>Daftar Isi</h3>

<ol>

<li><a href="#daftarisi-1">Pentingnya Daftar Isi.</a></li>

<li><a href="#daftarisi-2">Cara Membuat Daftar Isi.</a></li>

</ol>

Tampilan akhir pada mode HTML postingan kita akan terlihat seperti gambar dibawah ini:

Langkah selanjutnya adalah simpan postingan kita pada mode HTML dan publikasikan.

4. Catatan penting

Satu hal penting yang harus diingat, Daftar Isi pada sebuah postingan blog dibuat setelah tulisan atau artikel selesai dibuat. Jika ingin melihat tampilan hasil pekerjaan kita, lihat pratinjau yang ada pada pojok kanan atas dasbor. 

Terahir publikasikan pada mode HTML, karena jika dirubah pada mode Compose atau Tampilan menulis dimungkinkan akan merubah komposisi HTML sehingga pekerjaan kita menjadi sia-sia karena daftar isi yang kita buat menjadi tidak berfungsi. Untuk itu sedikit pemahaman tentang HTML dibutuhkan untuk membuat TOT ini.

Demikian tutorial Cara Membuat Daftar Isi atau Table Of Contents Pada Postingan Blog, Silahkan anda coba pada blog anda..semoga berhasil. Saran dan koreksi pada kolom komentar penulis harapkan untuk kesempurnaan. Semoga bermanfaat...Salam sejahtera untuk Anda dan Keluarga.💙🙏🙌