Membuat List Dengan Sub List Seperti TOC Wikipedia

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/12/2018

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.