Macam Lists Style Unordered dan Ordered (Numbering)

Macam Lists Style Unordered dan Ordered (Numbering) - Satu dari sekian banyak macam list style kita pergunakan pada sebuah list artikel blog, baik jenis Unordered, Ordered (numbering) atau list style berupa gambar (image). Dari banyaknya jenis list style yang ada tidak semua jenis list dapat dibaca dengan baik oleh browser, terutama Internet Explorer.

Untuk kedepannya seiring perkembangan teknologi browser, mudah-mudahan semua browser bisa support untuk semua jenis List Style.

Dibawah ini, beberapa macam lists style yang bisa dipergunakan pada artikel blog atau dipergunakan pada bagian-bagian lain.

Macam Nilai Properti List Style

Unordered	Ordered/Numbering	Ordered Not Support IE 9 dan Opera 12
disc	lower-roman	cjk-ideographic
circle	upper-roman	hebrew
square	lower-alpha	hiragana
none	upper-alpha	hiragana-iroha
	lower-latin	katana
	upper-latin	katana-iroha
	decimal
	decimal-leading-zero
	lower-greek
	armenian
	georgian

Cara Penggunaan

CSS

ul {
  list-style-type:square;     /* untuk unordered lists */
}

atau

ol {
  list-style-type:upper-alpha;     /* untuk ordered lists */
}

HTML

<ul>
<li>unordered lists 1</li>
<li>unordered lists 2</li>
<li>unordered lists 3</li>
</ul>

atau

<ol>
<li>ordered lists 1</li>
<li>ordered lists 2</li>
<li>ordered lists 3</li>
</ol>

Secara spesifik list style, bisa pergunakan untuk bagian-bagian tertentu dengan memberikan nilai list style yang berbeda, sebagai contoh untuk list style bagian sidebar dan lists style bagian posting (.post-body).

Penulisan css pada template adalah:

#sidebar ul atau #sidebar ol {
  list-style-type:...;     /* ... isi dengan jenis list yang akan dipergunakan */
}

.post-body ul atau .post-body ol {
  list-style-type:...;     /* ... isi dengan jenis list yang akan dipergunakan */
}

• Demo

Semoga mudah untuk dipahami.