Skip to main content
KOMPI AJAIB

follow us

Membuat List Dengan Sub List Seperti TOC Wikipedia

Table Of Content atau TOC adalah daftar isi bacaan yang biasanya dibuat di halaman awal sebuah buku atau di awal sebuah bacaan atau artikel, salah satunya yang sering kita lihat di Wikipedia.

Table Of Content atau TOC atau daftar isi biasanya berisi dari daftar judul atau deskripsi header dari tiap bab, kadang-kadang dilengkapi dengan sub judul dari sub bab artikel.

Dengan daftar isi ini maka pembaca akan lebih mudah mencari bab yang diperlukan. Daftar isi memberikan navigasi mudah kepada pembaca artikel.

Hari ini mari kita membuat list dengan sub list seperti Table Of Content atau TOC Wikipedia atau menyerupai Daftar Isi yang sering kita lihat di buku-buku.

Tentu saja ini juga bisa digunakan untuk TOC blog AMP ataupun TOC blog Non AMP yang sudah saya posting sebelumnya.

Sebenarnya bisa juga membuat list dengan sub list dengan menggunakan tag ul ataupun ol, namun kita harus menggunakan tambahan CSS untuk menghilangkan list-style yang biasanya muncul otomatis berupa angka atau titik.

Ada sebuah cara untuk membuat list dengan sub list yang tidak memiliki list-style sehingga kita tidak perlu menambahkan CSS untuk menghilangkan list-style, dan sepertinya ini masih jarang dipakai oleh blogger.

Kita bisa menggunakan HTML Description List untuk membuat list yang memiliki sub list atau deskripsi list seperti yang dipakai Wikipedia atau Daftar Isi pada buku atau seperti pada gambar di atas.

HTML Description List untuk membuat list yang memiliki sub list atau deskripsi list ini menggunakan kode seperti berikut:


<dl>
    <dt>List 1</dt>
    <dd>Sub List 1</dd>
    <dt>List 2</dt>
    <dd>Sub List 2</dd>
</dl>

Untuk contoh penulisannya untuk Table Of Content seperti berikut ini:


<dl>
  <dt>1. Coffee</dt>
  <dd>1.1. black hot drink</dd>
  <dd>1.2. black hot drink</dd>
  <dd>1.3. black hot drink</dd>
  <dd>1.4. black hot drink</dd>
  <dt>2. Milk</dt>
  <dd>2.1. white cold drink</dd>
  <dd>2.2. white cold drink</dd>
  <dd>2.3. white cold drink</dd>
  <dd>2.4. white cold drink</dd>
  <dd>2.5. white cold drink</dd>
  <dt>3. Coffee and Milk</dt>
  <dd>3.1. brown hot drink</dd>
  <dd>3.2. brown hot drink</dd>
</dl>

Dan penampakannya akan seperti berikut ini:

1. Coffee
1.1. black hot drink
1.2. black hot drink
1.3. black hot drink
1.4. black hot drink
2. Milk
2.1. white cold drink
2.2. white cold drink
2.3. white cold drink
2.4. white cold drink
2.5. white cold drink
3. Coffee and Milk
3.1. brown hot drink
3.2. brown hot drink

Untuk mengatur jarak tab sub list jika Anda anggap terlalu menjorok ke dalam, silahkan tambahkan CSS berikut:


dd{-webkit-margin-start:15px;}

Silahkan atur nilainya, secara default browser akan memberikan jarak 40px untuk tab sub list.

Tentu saja hal ini bisa kita gunakan pada Table Of Content Blogger, saya sudah mengeditnya dan tampak seperti pada widget JSFiddle di bawah ini, silahkan lihat mode HTML-nya untuk melihat penerapannya pada TOC Blogger ini. Bisa digunakan untuk TOC non AMP maupun TOC AMP.

Untuk header List pada TOC bisa menggunakan tag H3 (Subheading), dan untuk header Sub List bisa menggunakan tag H4 (Minor heading).


Bagaimana, mudah bukan? Semoga bermanfaat.


You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar