CSS LIST

Seperti halnya HTML List, fitur css List juga berfungsi untuk membuat sebuah List atau tanda pada daftar. Dalam hal ini ada tiga macam bentuk yang bisa kita gunakan yaitu :

• Ordered lists adalah daftar item yang ditandai dengan bentuk lingkaran kecil ataupun kotak kecil.

• Unordered lists adalah daftar item yang ditandai dengan bentuk angka atau huruf.

• Image lists adalah daftar item yang ditandai dengan bentuk gambar.

1. Ordered lists

<style type="text/css">
ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
</style>

<ul class="a">
<li>Bentuk lingkaran</li>
<li>Lingkaran kecil</li>
<li>Lingkaran blok</li>
</ul>

<ul class="b">
<li>Bentuk lingkaran</li>
<li>Lingkaran kecil</li>
<li>Lingkaran lubang</li>
</ul>

<ul class="c">
<li>Bentuk kotak</li>
<li>Kotak kecil</li>
<li>Kotak blok</li>
</ul>

Berikut hasilnya :

• Bentuk lingkaran
• Lingkaran kecil
• Lingkaran blok

• Bentuk lingkaran
• Lingkaran kecil
• Lingkaran lubang

• Bentuk kotak
• Kotak kecil
• Kotak blok

2. Unordered

<style type="text/css">
ol.e {list-style-type:decimal;}
ol.f {list-style-type:decimal-leading-zero;}
ol.g {list-style-type:lower-roman;}
ol.h {list-style-type:upper-roman;}
ol.i {list-style-type:lower-alpha;}
ol.j {list-style-type:upper-alpha;}
ol.k {list-style-type:lower-greek;}
ol.l {list-style-type:armenian;}
ol.m {list-style-type:georgian;}
</style>

<ol class="e">
<li>Bentuk angka</li>
<li>Bentuk angka</li>
<li>Bentuk angka</li>
</ol>

<ol class="f">
<li>Bentuk angka dg Nol didepannya</li>
<li>Bentuk angka dg Nol didepannya</li>
<li>Bentuk angka dg Nol didepannya</li>
</ol>

<ol class="g">
<li>Bentuk huruf romawi kecil</li>
<li>Bentuk huruf romawi kecil</li>
<li>Bentuk huruf romawi kecil</li>
</ol>

<ol class="h">
<li>Bentuk huruf romawi besar</li>
<li>Bentuk huruf romawi besar</li>
<li>Bentuk huruf romawi besar</li>
</ol>

<ol class="i">
<li>Bentuk huruf abjad kecil</li>
<li>Bentuk huruf abjad kecil</li>
<li>Bentuk huruf abjad kecil</li>
</ol>

<ol class="j">
<li>Bentuk huruf abjad besar</li>
<li>Bentuk huruf abjad besar</li>
<li>Bentuk huruf abjad besar</li>
</ol>

<ol class="k">
<li>Bentuk simbol 1</li>
<li>Bentuk simbol 1</li>
<li>Bentuk simbol 1</li>
</ol>

<ol class="l">
<li>Bentuk simbol 2</li>
<li>Bentuk simbol 2</li>
<li>Bentuk simbol 2</li>
</ol>

<ol class="m">
<li>Bentuk simbol 3</li>
<li>Bentuk simbol 3</li>
<li>Bentuk simbol 3</li>
</ol>

Berikut hasilnya :

1. Bentuk angka
2. Bentuk angka
3. Bentuk angka

1. Bentuk angka dg Nol didepannya
2. Bentuk angka dg Nol didepannya
3. Bentuk angka dg Nol didepannya

1. Bentuk huruf romawi kecil
2. Bentuk huruf romawi kecil
3. Bentuk huruf romawi kecil

1. Bentuk huruf romawi besar
2. Bentuk huruf romawi besar
3. Bentuk huruf romawi besar

1. Bentuk huruf abjad kecil
2. Bentuk huruf abjad kecil
3. Bentuk huruf abjad kecil

1. Bentuk huruf abjad besar
2. Bentuk huruf abjad besar
3. Bentuk huruf abjad besar

1. Bentuk simbol 1
2. Bentuk simbol 1
3. Bentuk simbol 1

1. Bentuk simbol 2
2. Bentuk simbol 2
3. Bentuk simbol 2

1. Bentuk simbol 3
2. Bentuk simbol 3
3. Bentuk simbol 3

3. Image lists

<style type="text/css">

ul.o {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLsqcPSVlQgcMpyQvaDu-59Esfc3BpZjQRgC1TGou8Z_230tBd11XH1fhntTGFif7dSb_iNlo8TWMGSGNZyZfW3jyqyAQU_Xe9NA0xo_LSYsHlT7LPrtH_eQDn7bwDZM124iTJ87EYYkJY/s104/List+1.jpg');}

ul.p {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IeF20ChtknxtR8k_nKyToplp8cutcyRhS7jxctKnEmt216y6GyF_KD76YTlg-SAC-QaRuSlN3gV41TDgEOsVv7sIKUbfJBhhNqDk15MDYyEss8Zlmj3Lq5p7OonbwwbItpSVks9ZIT-0/s104/List+2.jpg');}

ul.q {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig1Kryv46LF5DgReswrVB6PgwJOsRkELPeysvRNqONqEs5-3f0KLqwiDp99iw7PUw05WQXimsyLxbfL5MhqgbCRU-yNQlLaPZZg28rJ3Eg2Q225BLq9TgCRN5jZ8PQLQPUZNiX5mvSQJ9d/s104/List+3.jpg');}

ul.r {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi70m9mVagwh_pdx8l-lt4VqUh85X4w5I5fgxuUk1aECb9dMBLYuD_WwRvZtcoxds7SZ14_XJnsHumFDqAxDTzm66L49UF2urrf7aVVP_JwZzfedUYpBPWgJDtsRFbE3ooc12WOb0-0OY-d/s104/List+4.jpg');}

ul.s {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizZuuwliGEJYcQn_cxSuyz42SFgw9h1Mga0WddiZIX6l5DHrxOLtrruJR1sR1QRKYMv47ZfGHNZNyZmssPAQ0sX1LBa4ZgcjTyVN4G1_jezowvQXrDM03xH2dJfEWW6fRPuDxQn074BHiB/s104/List+5.jpg');}

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZwmbMG69ex_fHrKv9pwlfrWICgYf37KpS0TB0sl_9bugHIKLFn8TqjnmXRPuraf2NxIye310P8_zmTRVNNvsQIPhnnGpsvGdq_ZifCRaXWlRszqofaE2xp5dYREMDShljrD9pte2iPCv0/s104/List+6.jpg');}

</style>

<ul class="o">
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
</ul>

<ul class="p">
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
</ul>

<ul class="q">
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
</ul>

<ul class="r">
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
</ul>

<ul class="s">
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
</ul>

<ul class="t">
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
</ul>

Berikut hasilnya :

• Bentuk gambar 1
• Bentuk gambar 1
• Bentuk gambar 1

• Bentuk gambar 2
• Bentuk gambar 2
• Bentuk gambar 2

• Bentuk gambar 3
• Bentuk gambar 3
• Bentuk gambar 3

• Bentuk gambar 4
• Bentuk gambar 4
• Bentuk gambar 4

• Bentuk gambar 5
• Bentuk gambar 5
• Bentuk gambar 5

• Bentuk gambar 6
• Bentuk gambar 6
• Bentuk gambar 6

Catatan :

Silahkan anda ganti Ulr gambar List dengan Ulr gambar List milik anda.

Untuk penerapan, anda bisa pilih salah satu bentuk yang disukai dan langsung ditempatkan pada posting bisa, langsung pada gadget juga bisa. Jadi bila salah satu yg dipakai (misal saya pakai List yg paling bawah), maka kode yg dipakai jadi seperti ini :

<style type="text/css">

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZwmbMG69ex_fHrKv9pwlfrWICgYf37KpS0TB0sl_9bugHIKLFn8TqjnmXRPuraf2NxIye310P8_zmTRVNNvsQIPhnnGpsvGdq_ZifCRaXWlRszqofaE2xp5dYREMDShljrD9pte2iPCv0/s104/List+6.jpg');}

</style>

<ul class="t">

<li>Bentuk gambar 6</li>

<li>Bentuk gambar 6</li>

<li>Bentuk gambar 6</li>

</ul>

Catatan : Huruf "t" yg berwarna biru merupakan ID, anda bisa ganti ID seperti huruf "t" diatas dgn nama bebas asal keduannya sama.

Bila ditambahkan Link, maka jadinya seperti berikut :

<style type="text/css">

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZwmbMG69ex_fHrKv9pwlfrWICgYf37KpS0TB0sl_9bugHIKLFn8TqjnmXRPuraf2NxIye310P8_zmTRVNNvsQIPhnnGpsvGdq_ZifCRaXWlRszqofaE2xp5dYREMDShljrD9pte2iPCv0/s104/List%2B6.jpg');}

</style>

<ul class="t">

<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/03/css-list.html">CSS List</a></li>

<li><a href="http://tutorialbloggermasnoer.blogspot.com/search/label/css list">Label CSS List</a></li>

<li><a href="http://tutorialbloggermasnoer.blogspot.com/search/label/css">Label CSS</a></li>

</ul>

Catatan : Jangan lupa ganti ukuran gambar berwarna pink (utk blogger biasanya s104 atau h104), dengan ukuran lebih kesil misal: "15px" , sehingga menjadi s15 atau h15.

• List pertama adalah contoh Link langsung keartikel
• List kedua adalah contoh Link Label CSS List
• List ketiga adalah contoh Link Label CSS

Berikut hasilnya :

• CSS List
• Label CSS List
• Label CSS

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.