Cara Membuat Bullets dan Numbering Tag HTML di Blogspot

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.
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).

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>

Silahkan gunakan daftar bullet atau numbering yang sesuai pada halaman HTML Anda. Jika Anda memiliki pertanyaan atau sekedar berdiskusi jangan ragu untuk meninggalkan komentar.