Cara Mudah Membuat Custom Bullet and Numbering Blogger Responsive

Cara membuat list HTML - Dari waktu ke waktu, Anda mungkin ingin membuat daftar bernomor atau bullet/list pada artikel halaman web Anda. Fungsi yang digunakan adalah menggunakan tombol "Numbered list" atau "Bullet list" yang terdapat pada dasbor postingan. Tag dasar yang digunakan semua sama yaitu ul, ol dan li.

Mari kita bahas sama-sama fungsi dari ke tiga tag diatas.

Daftar Isi Artikel:

Semua perintah harus di apit seperti <ul>...</ul> atau <ol>...</ol>. Dimana tag <ul> untuk menampilkan list Bullet (Unordered Lists) sedangkan tag <ol> adalah untuk menampilkan list Numbered (Ordered Lists).

List Bullet (Unordered Lists)

Type Atribut penggunakan tag <ul> menentukan jenis bullet yang akan terlihat pada halaman blog. Meskipun melalui pemanggilan CSS kita dapat menentukan berbagai-macam model bullet dan bahkan menggunakan gambar sendiri, secara default di HTML memiliki 3 jenis bullet :

1. Circle

Tipe atribut bullet Circle menghasilkan Lingkaran Kosong

• Item 1
• Item 2
• Item 3

Format kode penulisan

<ul type="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

2. Disc

Tipe atribut bullet Disc menghasilkan Lingkaran Berisi

• Item 1
• Item 2
• Item 3

Format kode penulisan

<ul type="disc">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

3. Square

Tipe atribut bullet Square menghasilkan Persegi Berisi

• Item 1
• Item 2
• Item 3

Format kode penulisan

<ul type="square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

4. Gabungan

• type="circle"Bullet dengan Lingkaran kosong

• type="disc"Bullet dengan Lingkaran terisi

• type="square"Bullet dengan Persegi terisi

Contoh diatas menggunakan kode berikut ini :

<ul type="circle">
  <li>Bullet dengan Lingkaran kosong</li>
</ul>

<ul type="disc">
  <li>Bullet dengan Lingkaran terisi</li>
</ul>

<ul type="square">
  <li>Bullet dengan Persegi terisi</li>
</ul>

Daftar di atas saya ditempatkan di masing-masing <ul> tetapi masing-masing <li> juga mendukung jenis atribut, sehingga bisa terlihat seperti :

• Circle
• Disc
• Square

Berikut kodenya:

<ul>
  <li type="circle">Circle</li>
  <li type="disc">Disc</li>
  <li type="square">Square</li>
</ul>

List Numbered (Ordered Lists)

Jika Anda ingin menyajikan daftar artikel dengan cara penggunaan tag <ol>. Secara default langsung memberikan daftar nomor.

Tipe umum numbering adalah Angka biasa (1,2,3,... dst), Alfabet (A,B,C,... dst.), maupun Romawi (I,II,III,... dst). Tag HTML yang digunakan untuk tipe ini, dibuka dengan kode <ol> dan ditutup dengan kode </ol>. Sedangkan untuk masing masing item/list dibuka dengan <li> dan ditutup dengan </li>.

1. Angka (Default)

<ol>
  <li>Nomor 1</li>
  <li>Nomor 2</li>
  <li>Nomor 3</li>
  <li>Dan seterusnya ...</li>
</ol>

Berikut hasil penerapannya

1. Nomor 1
2. Nomor 2
3. Nomor 3
4. Dan seterusnya ...

2. Alfabet

Selain menggunakan atribut default seperti di atas kita juga bisa melakukan perubahan tampilan secara fleksibilitas seperti dibawah ini :

<ol type="A">
  <li>Nomor 1</li>
  <li>Nomor 2</li>
  <li>Nomor 3</li>
  <li>Dan seterusnya ...</li>
</ol>

Berikut hasil penerapannya

1. Nomor 1
2. Nomor 2
3. Nomor 3
4. Dan seterusnya ...

3. Romawi

Kita juga bisa melakukan perubahan tampilan dengan Nomor Romawi seperti dibawah ini :

<ol type="I">
  <li>Nomor 1</li>
  <li>Nomor 2</li>
  <li>Nomor 3</li>
  <li>Dan seterusnya ...</li>
</ol>

Berikut hasil penerapannya

1. Nomor 1
2. Nomor 2
3. Nomor 3
4. Dan seterusnya ...

4. Custom (Start at)

Ketika kita membuat penomoran, kemudian terpisah oleh kalimat atau paragaraf, otomatis setelah kalimat atau paragraf tersebut dimulai dari angka pertama. Mengatasi kendala tersebut, kita bisa menambahkan attribut start='...' caranya:

<ol start="4">
  <li>Nomor 4</li>
  <li>Nomor 5</li>
  <li>Nomor 6</li>
  <li>Dan seterusnya ...</li>
</ol>

Berikut hasil penerapannya

4. Nomor 4
5. Nomor 5
6. Nomor 6
7. Dan seterusnya ...

5. Nomor Menurun (Reversed)

Selanjutnya membalikkan ordered dengan penambahan type reversed.

<ol reversed="reversed">
  <li>Pertama</li>
  <li>Kedua</li>
  <li>Ketiga</li>
  <li>Keempat</li>
  <li>Kelima</li>
</ol>

Hasilnya..

1. Pertama
2. Kedua
3. Ketiga
4. Keempat
5. Kelima

Untuk attribute reserved bisa kalian kosongi seperti reserved="", atau bisa kalian tambahkan seperti contoh diatas.

Gabungan Bullet dan Numbering

Kita juga bisa menggabungkan antara bullet dan numbering seperti berikut ini:

<ol>
  <li>Bagian 1</li>
  <li>Bagian 2</li>
    <ul>
      <li>Sub Bagian 2.1</li>
      <li>Sub Bagian 2.2</li>
      <li>Sub Bagian 2.3</li>
    </ul>
  </li>
  <li>Bagian 3</li>
</ol>

Hasilnya tampak seperti dibawah ini:

1. Bagian 1
2. Bagian 2
   • Sub Bagian 2.1
   • Sub Bagian 2.2
   • Sub Bagian 2.3
3. Bagian 3

Demikian, cara membuat dan memaksimalkan bullet & numbering dalam postingan blog, Silahkan gunakan daftar bullet atau numbering yang sesuai pada halaman HTML Anda. Jika Anda memiliki pertanyaan atau sekedar berdiskusi jangan ragu untuk meninggalkan komentar.

Download