Membuat List Dengan Sub List Ibarat Toc Wikipedia

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

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

Sebenarnya dapat juga menciptakan list dengan sub list dengan memakai tag ul ataupun ol, namun kita harus memakai suplemen CSS untuk menghilangkan list-style yang biasanya muncul otomatis berupa angka atau titik.

Ada sebuah cara untuk menciptakan list dengan sub list yang tidak mempunyai list-style sehingga kita tidak perlu menambahkan CSS untuk menghilangkan list-style, dan tampaknya ini masih jarang digunakan oleh blogger.

Kita dapat memakai HTML Description List untuk menciptakan list yang mempunyai sub list atau deskripsi list mirip yang digunakan Wikipedia atau Daftar Isi pada buku atau mirip pada gambar di atas.

HTML Description List untuk menciptakan list yang mempunyai sub list atau deskripsi list ini memakai aba-aba mirip berikut:

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

Untuk pola penulisannya untuk Table Of Content mirip 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 mirip 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 jikalau Anda anggap terlalu menjorok ke dalam, silahkan tambahkan CSS berikut:

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

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

Tentu saja hal ini dapat kita gunakan pada Table Of Content Blogger, aku sudah mengeditnya dan tampak mirip 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 dapat memakai tag H3 (Subheading), dan untuk header Sub List dapat memakai tag H4 (Minor heading).

Bagaimana, gampang bukan? Semoga bermanfaat.



Sumber https://www.kompiajaib.com/

Share this post