Cara Membuat Table of Content Sederhana Dengan Html & Css

Table of Content (TOC) atau yang biasa kita sebut dengan daftar isi sangat umum kita jumpai pada dokumen atau buku, dulunya merupakan fasilitas yang ada pada microsoft word untuk membuat daftar isi secara otomatis atau manual.

Sekarang banyak sekali kita temui website maupun blog yang menggunakan Table of Content, sebenarnya daftar isi ini tidak terlalu berpengaruh dipencarian google namun kebanyakan memakainya lebih karena untuk kenyamanan pengunjung khususnya ketika membaca artikel yang panjang lebih dari 1000 kata.

Untuk pertama kita buat cssnya terlebih dahulu untuk nantinya disisipkan ke css template, sebetulnya tidak memakai css pun tidak masalah hanya saja terlihat kurang rapi. Dan ini adalah contoh cssnya.

#toc_daftarisi {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}

.toc_judul {
    font-weight: 700;
    text-align: center;
}

#toc_daftarisi li, #toc_daftarisi ul, #toc_daftarisi ul li{
    list-style: outside none none !important;
}

Setelah css kita buat, selanjutnya kita buat susunan html daftar isi, yang mana contohnya seperti dibawah. Jika tidak memerlukan sub judul bisa dipotong saja dari <ul> sampai </ul> sub judul.

<div id="toc_daftarisi">
<p class="toc_judul">Contents</p>
<ul class="toc_baris">
  <li><a href="#Pembahasan_Pertama">1 Pembahasan Pertama</a>
  <ul>
    <li><a href="#Sub_Pembahasan_Pertama_1">1.1 Sub Pembahasan Pertama 1</a></li>
    <li><a href="#Sub_Pembahasan_Pertama_2">1.2 Sub Pembahasan Pertama 2</a></li>
  </ul>
</li>
<li><a href="#Pembahasan_Kedua">2 Pembahasan Kedua</a></li>
<li><a href="#Pembahasan_Ketiga">3 Pembahasan Ketiga</a></li>
</ul>
</div>

Nah jika sudah sekarang kita masukan judulnya ke <h2 seperti dibawah agar ketika link daftar isi diklik maka akan langsung geser ke judul yang diharapkan.

<h2 id="Pembahasan_Pertama">Pembahasan Pertama</h2>

Tinggalkan Balasan