Cara Membuat Daftar List pada Blog

Jika anda pernah menggunakan Microsoft Word tentu saja akan sangat mengenal dengan istilah bullet dan numbering. Pada blog, juga menggunakan istilah ini. Hanya saja cara menuliskannya berbeda.

Secara umum daftar list dibagi menjadi 2, yaitu daftar list numbering atau biasa dikenal dengan ordered list. Dan daftar list yang kedua berupa bullet (simbol) atau biasa dikenal dengan unordered list.

Sebagai contoh silahkan dilihat bedanya dibawah ini :

Ordered List / Numbering

1. Baris Pertama
2. Baris Kedua
3. Baris Ketiga
4. Dan Seterusnya

Unordered List / Bullet

• Baris Pertama
• Baris Kedua
• Baris Ketiga
• Dan Seterusnya

Bagaimana cara menuliskannya pada HTML atau Blog ? Untuk menuliskannya kita harus berada pada mode HTML. Secara umum, bentuk penulisannya adalah sbb :

Ordered List / Numbering :

<ol> 
  <li>Baris Pertama</li>  
  <li>Baris Kedua</li>  
  <li>Baris Ketiga</li> 
  <li>Dan Seterusnya</li> 
</ol> 

Untuk menuliskan ordered list kita memulainya dengan TAG <ol></ol>. Dan untuk menuliskan baris isinya ditulis dengan tag <li>Teks Anda</li>

Unordered List / Bullet :

<ul> 
  <li>Baris Pertama</li>  
  <li>Baris Kedua</li>  
  <li>Baris Ketiga</li> 
  <li>Dan Seterusnya</li> 
</ul>

Untuk menuliskan unordered list kita memulainya dengan TAG <ul></ul>. Dan untuk menuliskan baris isinya ditulis dengan tag <li>Teks Anda</li>

Diantara kedua list ini bisa disisipkan atau digabungkan menjadi bagian yang komplek, seperti contoh dibawah ini :

1. Baris Pertama
2. Baris Kedua
   
   • Sub Baris Pertama
   • Sub Baris Kedua
     
     1. Sub Sub Baris Pertama
     2. Sub Sub Baris Kedua
   • Sub Baris Ketiga
3. Baris Ketiga

Cara penulisannya adalah sebagai berikut :

<ol>
  <li>Baris Pertama </li>
  <li>Baris Kedua 
    <ul>
      <li>Sub Baris Pertama </li>
      <li>Sub Baris Kedua 
        <ol>
          <li>Sub Sub Baris Pertama </li>
          <li>Sub Sub Baris Kedua </li>
        </ol>
      </li>
      <li>Sub Baris Ketiga </li>
    </ul>
  </li>
  <li>Baris Ketiga </li>
</ol>

Tweet