Cara Membuat Daftar isi Atau Table Of Content

Ketika kita membuat sebuah artikel terkadang isi dari artikel tersebut menggunakan beberapa Heading atau Sub Heading. Yang tujuannya untuk memperjelas kandungan makna dari artikel tersebut, juga untuk menambah SEO artikel.

Untuk mempermudah pengunjung dalam mencari artikel yang mereka inginkan maka ada bagusnya pembuatan artikel dilengkapi dengan daftar isi. Layaknya sebuah buku yang terdiri dari beberapa judul. Dengan adanya daftar isi akan memudahkan pembaca dalam menemukan hal penting yang ingin mereka baca.

Contohnya, seseorang mencari artikel cara membuat daftar isi pada postingan blog tanpa CSS dan java script.

Sementara dalam artikel yang Anda buat mencakup semuanya, ada yang menggunakan CSS saja, ada yang menggunakan CSS dan java script, ada juga yang tanpa CSS dan java script.

Sementara untuk cara yang tidak menggunakan CSS dan java script, Anda tulis pada bagian akhir. Ini akan membuang waktu pengunjung membaca dari awal sampai akhir. Sedangkan yang mereka cari ada pada bagian akhir.

Nah dengan adanya daftar isi yang Anda pasang di awal paragraf artikel, akan memudahkan sipengunjung agar bisa langsung mengklik cara yang mereka maksud.

lebihnya seperti itu pentingnya membuat daftar isi atau table of content dalam postingan blog.

Baik langsung saja..

Cara membuat daftar isi atau table of content didalam postingan blog

Pertama-tama pasang dulu CSS dibawah ini diantara <b:skin> dan </b:skin> atau diantara <style> dan </style>. Tergantung jenis template blog yang Anda gunakan.

.daftar-isitoggle:not(:checked) + .daftar-isititle .daftar-isitogglelabel:after {content:'sembunyikan';display: inline}
.daftar-isitoggle:checked + .daftar-isititle .daftar-isitogglelabel:after {content:'tampilkan'}
:not(:checked) > .daftar-isitogglespan:after {content:']'}
.daftar-isitoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:120px; visibility:hidden}

Untuk kode

margin-top:120px;

Nilai px nya harus disesuaikan dengan margin header. Karena ketika daftar isi di klik oleh pengunjung akan langsung menarik artikel ke atas. Nah sesuaikan nilainya jangan sampai awal dari Sub tersebut terhalang oleh header.

Kode CSS diatas berfungsi sebagai pemanis sekaligus untuk membuat Show dan Hide pada fitur daftar isi.

Selanjutnya menerapkan kode daftar isi pada postingan yang sedang Anda buat. Sebaiknya langkah ini dilakukan paling akhir setelah semua isi artikel selesai Anda buat.

Karena menerapkan kode untuk daftar isi harus dilakukan pada mode HTML bukan mode Compose. Apabila terjadi kesalahan mode, akan mengakibatkan cara ini tidak bekerja.

Setelah artikel selesai Anda tulis, silahkan rubah mode dari Compose ke HTML. Lalu pasang kode dibawah ini diparagraf yang sekiranya tepat. Misalnya diparagraf kedua setelah kata pengantar artikel.


<div class="daftar-isi">
  <input type="checkbox" role="button" id="daftar-isitoggle" class="daftar-isitoggle">
  <div class="daftar-isititle">
    <h2>Daftar isi</h2>
    <span class="daftar-isitogglespan"><label class="daftar-isitogglelabel" for="daftar-isitoggle"></label></span>
  </div>
  <ul>
    <li>1 <a href="#daftar-isi1" title="Teks daftar isi 1">Teks daftar isi 1</a></li>
    <li>2 <a href="#daftar-isi2" title="Teks daftar isi 2">Teks daftar isi 2</a></li>
    <li>3 <a href="#daftar-isi3" title="Teks daftar isi 3">Teks daftar isi 3</a></li>
  </ul>
</div>

Untuk jumlah daftar isi sesuaikan dengan jumlah Heading atau sub heading yang akan dimuat oleh daftar isi.
Penjelasan dari koe diatas adalah sebagai berikut:

  • Teks daftar isi 1 ganti dengan Heading atau Sub Heading pertama
  • Teks daftar isi 2 ganti dengan Heading atau Sub Heading kedua
  • Teks daftar isi 3 ganti dengan Heading atau Sub Heading ketiga

Selanjutnya merubah Heading atau Sub Heading pada postingan. Biasanya kalau sebuah tulisan djadikan Heading atau Sub Heading, maka kalau dilihat dari mode HTML akan terlihat seperti ini.

<h2>Teks daftar isi 1</h2>

Atau

<h3>Teks daftar isi 1</h3>

Nah tugas Anda adalah merubahnya menjadi seperti ini

<h2 id="daftar-isi1">Teks daftar isi 1</h2>

Lakukan pada setiap Heading atau Sub Heading dan untuk kode

daftar-isi1
Harus sesuai dengan jumlah Heading yang akan Anda tampilkan pada daftar isi.
daftar-isi1
daftar-isi2
daftar-isi3

Perlu saya tegaskan kalau penerapan cara diatas harus dilakukan pada mode HTML, dana setelah selesai jangan dirubah lagi ke mode Compose. Langsung saja publikasikan postingan tersebut.

Saya rasa cukup jelas, demikianlah cara membuat daftar isi atau table of content didalam postingan blog. Semoga bermanfaat.