Cara Membuat Bullets dan Numbering Tag HTML di Blogspot - Idrahman

Menampilkan 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 :

• type="circle" – Lingkaran terisi

• type="disc" – Lingkaran penuh

• type="square" – Persegi terisi

Sebagai contoh seperti dibawah ini :

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

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

• Square

• Disc

• Circle

Menampilkan list Numbered (Ordered Lists):
Jika Anda ingin menyajikan daftar artikel dengan cara penggunaan tag <ol>. Secara default langsung memberikan daftar nomor.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Hasilnya..

1. Item 1
2. Item 2
3. Item 3

Tetapi jenis atribut ini kita juga bisa melakukan perubahan tapilan secara fleksibilitas seperti dibawah ini :

<ol type="A">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Hasilnya..

1. Item 1
2. Item 2
3. Item 3

Berikutnya..

<ol start="4">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Hasilnya

4. Item 1
5. Item 2
6. Item 3

Selanjutnya membalikkan ordered dengan penambahan type reversed

<ol reversed="reversed">
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Five LI</li>
</ol>

Hasilnya..

1. First LI
2. Second LI
3. Third LI
4. Fourth LI
5. Five LI

Dibeberapa kasus ada beberapa artikel penggunaan tag <ol> (list Numbered) penampilan nomor terpisah oleh beberapa paragraf. 

Contoh seperti dibawah ini :

1. Item 1
2. Item 2

Ini adalah alinea yang memisahkan penggunaan tag <ol>, sehingga penggunan tag berikutnya tetap mengikuti dan menampilkan angka selanjutnya dari penggunaan tag <ol> sebelumnya.

3. Item 3
4. Item 4
5. Item 5

Contoh penerapannya dari hasil diatas adalah :

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Ini adalah alinea yang memisahkan penggunaan tag <ol>, sehingga penggunan 
tag berikutnya tetap mengikuti dan menampilkan angka selanjutnya dari penggunaan tag <ol> 
sebelumnya.
<ol start="3">
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>

Bagikan Artikel ini