Membuat List Item Bergambar Dengan CSS

Membuat List Item Bergambar Dengan CSS - Dengan menggunakan CSS, kita bisa lebih mudah dalam memperindah suatu tampilan web/blog yang kita miliki, selain itu kita juga bisa menggunakan CSS untuk membuat list item secara unordered disertai dengan gambar kecil sebagai icon. Dan kali ini saya akan share cara membuat list item bergambar dengan CSS.

Scriptnya adalah sebagai berikut :

<style type="text/css">
ul.ngeposta {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlsvBaqHuqRDnwZCptTKTa7i00lRS0OjHNDwIWWqTdodRvR1nywLHdO1Qzspn38xHcShtKJSqzaVFqYB3T3unqORAlLcfJm_NBN2VbfUj6OdkQeC1zj9mEAme3tdVG_zciuNA1q06pglXv/s15/List%2B3.jpg');
}
</style>

<ul class="ngeposta">
<li>Beginilah jadinya</li>
<li>Beginilah jadinya</li>
<li>Beginilah jadinya</li>
</ul>

Preview :

• Beginilah jadinya
• Beginilah jadinya
• Beginilah jadinya

berikut adalah script yang sama seperti diatas hanya saja menggunakan gambar yang berbeda/url gambarnya berbeda :

<style type="text/css">
ul.ngeposta {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8GYs-BBNbgl9UA_kYlcjW_EpEuVDTKQvSBvJni633_geF0MA1_kmmc99jXQnVRq-MwJH1PV-mZKxcR4XbAf6pmE3IjgiUJnznkYV1CGwPg2wAoR59WYrlQaPst-bxAh5Zo-9_ItuAB03p/s15/List%2B6.jpg');
}
</style>

<ul class="ngeposta">
<li>Beginilah hasilnya</li>
<li>Beginilah hasilnya</li>
<li>Beginilah hasilnya</li>
</ul>

Preview :

• Beginilah hasilnya
• Beginilah hasilnya
• Beginilah hasilnya

Note :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8GYs-BBNbgl9UA_kYlcjW_EpEuVDTKQvSBvJni633_geF0MA1_kmmc99jXQnVRq-MwJH1PV-mZKxcR4XbAf6pmE3IjgiUJnznkYV1CGwPg2wAoR59WYrlQaPst-bxAh5Zo-9_ItuAB03p/s15/List%2B6.jpg adalah url gambar yang akan kita gunakan sebagai icon list item tersebut, anda bisa menggantinya dengan url gambar anda sendiri. Sedangkan s15 adalah kode untuk mengatur ukuran (size) dari gambar yang akan kita gunakan tersebut, silahkan sesuaikan dengan selera anda misalnya anda rubah ukurannya menjadi s20 atau s25 atau bisa juga menjadi s30, dan seterusnya.

Bagaimana? Mudah kan... Selamat mencoba ya, semoga postingan tentang cara membuat list item bergambar dengan CSS ini bermanfaat dan selebihnya saya mohon ma'af atas segala kekurangan. Cukup sekian saya akhiri dan salam sejahtera by ngeposta...

Anda sedang membaca Artikel berjudul Membuat List Item Bergambar Dengan CSS, dan dengan URL http://kabarkabaru.blogspot.com/2012/09/membuat-list-item-bergambar-dengan-css.html. Anda boleh membagikan artikel Membuat List Item Bergambar Dengan CSS ini kepada Teman - Teman anda namun jangan lupa mencantumkan link Membuat List Item Bergambar Dengan CSS sebagai Sumbernya.Terima Kasih