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 Rounded Corner Memang asyik bila kita sudah berhadapan dengan kode css, sebab dengan kode-kode css kita bisa buat efek apa saja seperti :  efek rounded corner, text shadow ... readmore
• Cara membuat TooltipTooltip adalah sebuah tool yang melekat pada sebuah link dan berfungsi memberikan keterangan atau petunjuk kepada pengunjung mengenai isi suatu dokumen atau sebuah ... readmore
• CSS3 TransisiSetelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahka ... readmore
• CSS PaddingProperti CSS padding berfungsi untuk mengatur jarak antara  elemen dengan isi elemen, misalnya mengatur posisi teks yang ada didalam border, tabel dll. Seperti ... readmore
• Cara buat gallery dengan efek hover zoomingTambah lagi koleksi cara buat gallery. Berbeda dengan yang lalu, anda bisa lihat DISINI. Gallery yang ini lebih menarik dan cara kerjanya juga lebih enak dipandang. ... readmore