CSS : Change Your LI Type with Background Image

Di kesempatan sebelumnya, edittag pernah menulis mengenai type UL di dalam file xml Blogger. Disitu juga tersebut adanya pembatasan tipe untuk menampilkan tampilan daftar item (list item).

Lalu bagaimana agar kita punya tampilan yang berbeda, tak mau hanya terima dengan apa yang ditawarkan pihak Blogger? Untuk urusan UL dan LI sebenarnya kita bisa melakukan perombakan tampilanya melalui CSS.

Yakni dengan penambahan background pada atribut LI. Namun penggunaan cara ini memang masih menyisakan masalah klasik bagi sebagian perambah (browser). Bukan berarti tak semuanya tak mampu mendukung CSS ul dan li, karena bila kita sempat melongok beberapa layout atau template bawaan blogger, beberapa diantaranya menyertakan CSS background untuk LI.

Biasanya di layout baku (bawaan blogger) kita seringkali melihatnya di bagian CSS yang disebut sebagai Typography : Main entry. Coba lihatlah bagian CSS berlabel komentar seperti diatas. Masuk ke dasboard, lalu klik Layout, dan tuju Edit HTML. Lalu coba turun kebawah hingga menemukan kode seperti ini :

.post li {
line-height:1.5em;
list-style:none;
background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat 0px

Hasilnya tentu sama-sama bisa dilihat. Bila dalam suatu postingan terselipkan kode UL dan LI maka akan ada tampilan gambar bulatan (list_icon.gif) didepannya. Tentu ini berlaku bila kita tak menambahkan type dibelakang LI. Atau dalam hal ini diwakili oleh kode CSS diatas, yakni : list-style:none;.

Bila kita memiliki gambar lain sebagai pengganti ikon LI ini (lebih bagus bila ukuranya 10*10 pixel), kita bisa menunggahnya terlebih dahulu. Bisa kita mengunggahnya dengan metode seperti di profile atau di googlepages. Lalu salin alamat URL file gambar tersebut. Dan gantikan pada bagian background:url.

Hingga misalnya akan menjadi :

.post li {
line-height:1.5em;
list-style:none;
background:url("http://eninesia.googlepages.com/bullet_e.gif") no-repeat 0px

Tak lupa untuk menyimpan layoutnya bila sudah diedit.
Untuk menyimak hasilnya, bisa dilihat contoh berikut :

•   Pertama


•   Kedua

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com