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/AVvXsEiH2hSpGFGPsRRtsDZT9ZoAx2L9aFTlc51CWXjYsUgiirBme6dfLx_XfMuenhfRBP2bZHtrh05ASX0JacGixkuPYyFT1X9HxKUv99xWCE-uB6oYLW0xGHtbHTJyBu2l4Fpuqj1-UL0p6Biv/s104/List+1.jpg');}

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

ul.q {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAn0wTY9MZvdtOWmH2OciKFMYxd5_369zvYoCsKlF7CKz2YnEu-st-_becm29Y-yL1IuU2JhtTVtbs1DULP7UWYmBr0gYf4KXU3h7vck4bqrCs9R8echS4a3xNS-iX7HWCjB5VnAyXrxq_/s104/List+3.jpg');}

ul.r {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGINMcRGOUZxB0ITQ04qJScbCewFvsMH3riWiwZAcnWAU8TOzpi5PDaqh89qRyDS1vAcb-wCUHmXYllZchfdOvBnEoql1jLwYNzNgnJ-oIMXLhsH5WzwCc-vlgbrpMdgLSu5_YFd00Nf3/s104/List+4.jpg');}

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

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHK9WJvn5ikDc4t8_ndZygP5om0Be0QtwRWWOsCCPRxsjARbJh9zLRavJSyc8dhkakzAvLBJyHgyI0fbrVKIxKy3xl8PvxM5imuZv25y-2dNBtGb-c5YM-3TZtzL08ZQzsJ5k_flk0-evE/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/AVvXsEjHK9WJvn5ikDc4t8_ndZygP5om0Be0QtwRWWOsCCPRxsjARbJh9zLRavJSyc8dhkakzAvLBJyHgyI0fbrVKIxKy3xl8PvxM5imuZv25y-2dNBtGb-c5YM-3TZtzL08ZQzsJ5k_flk0-evE/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/AVvXsEjHK9WJvn5ikDc4t8_ndZygP5om0Be0QtwRWWOsCCPRxsjARbJh9zLRavJSyc8dhkakzAvLBJyHgyI0fbrVKIxKy3xl8PvxM5imuZv25y-2dNBtGb-c5YM-3TZtzL08ZQzsJ5k_flk0-evE/s104/List%2B6.jpg');}

</style>

<ul class="t">

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

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

<li><a href="http://www.carabuatwebgratis.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.

Judul: CSS LIST; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat menu tooltipMenu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link at ... readmore
• Cara buat menu drop down bubbleKoleksi baru lagi cara buat menu drop down, dan menu ini memiliki tampilan yang berbeda dengan menu drop down yang lain. Menu drop down ini mengunakan efek bubble y ... readmore
• Cara Membuat Navigasi HalamanCara lain untuk memudahkan pengunjung mencari artikel yang ada pada blog kita adalah memberi tombol navigasi halaman yang berada dibawah artikel. Selain memberikan ... readmore
• Cara membuat textarea dengan tombol "select all"Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk men ... readmore
• Cara buat Fitur Slide AccordionKarya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini.  Widget ini saya beri nama Fitur Slide Accordion. Selain tampilan ... readmore