Selamat pagi sobat K'ian semua, kali ini k'ian mau share mengenai CSS Tutorial dengan Tema "Styling List" / atau format gaya untuk daftar blog kamu. Seperti yang kita ketahui bahwa hampir setiap template memiliki List dengan menggunakan Button list yang berbeda-beda, ada yang berbentuk "Square" atau kotak, "circle" / bulat, bahkan sampai ada yang menggunakan gambar sebagai button listnya.

Berikut penjelasan dan contohnya :
1.Pada contoh berikut kita hanya menggunakan pola button "Circle" pada keterangan list stylingnya, dengan menambahkan kode "ul" sebagai berikut :

ul {list-style-type:circle;}

Hasilnya,

• Coffee


• Tea


• Coca Cola

2. Sedangkan pada contoh berikut kita menggunakan pola button "Square" pada keterangan list stylingnya, dengan menambahkan kode berikut :

ul {list-style-type:square;}

Hasilnya,

• Coffee


• Tea


• Coca Cola

Tambahkan salah satu Button list diatas pada kode CSS blog sobat, kamu bisa meletakkannya di CSS Body atau pada Postingan Blog. Bahkan kamu juga bisa meletakkan seluruh Styilng list dengan pola yang berbeda-beda pada template kamu.
Berikut contoh dengan pola angka dan huruf, atau bilangan. cukup tambahkan kode "ol " contohnya dibawah ini :

ol.{list-style-type:upper-roman;}

1. Coffee
2. Tea

ol. {list-style-type:lower-alpha;}

1. Coffee
2. Tea

3. Pola selanjutnya adalah dengan menggunakan pola Url Button atau pola dengan menggunakan gambar. Untuk tutorial nya sendiri cukup kita ubah styling list code nya, dengan menambahkan url gambar.

ul. {list-style-image:url('http://i852.photobucket.com/albums/ab82/deviceratt/btn_twitter.png');}

Hasilnya,

• Coffee


• Tea


• Coca Cola

Semoga apa yang sudah k'ian berikan diatas bisa bermanfaat, jangan lupa untuk selalu melihat "Preview" nya terlebih dahulu sebelum disimpan agar tidak terjadi hal-hal yang tidak diinginkan.