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/AVvXsEh_LBIT9JiUHZEfpS8ueEDeinUb9ZTwc_p0G8VJWnvMfAnKIjouGtctFB_srXf5gAfy5-Oz8S0vJVutembMf2GtixNH_3Up3_G9m5k8g5amBpEf_Ln8h3ANG3jUuwAy5Wy2_MmhxB2VUt2o/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/AVvXsEgyMYyuZqzYucMwYQahbldIbquU1znpczu-a_Vk4SSpfTeZUdT6pnn2pqxKQaJ1DnHN_cN-K7oEv5_3NemQ-Hpd03AcijwF28j1zvdxOBHNIiiNxcIatO1VXCwdfmHzsMVaPtucTSh-69Ow/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/AVvXsEgyMYyuZqzYucMwYQahbldIbquU1znpczu-a_Vk4SSpfTeZUdT6pnn2pqxKQaJ1DnHN_cN-K7oEv5_3NemQ-Hpd03AcijwF28j1zvdxOBHNIiiNxcIatO1VXCwdfmHzsMVaPtucTSh-69Ow/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

---

Luangkan sejenak: Demikianlah artikel tentang Membuat List Item Bergambar Dengan CSS diatas, semoga bermanfaat untuk sobat dimanapun berada.

---

Artikel Terpopuler :

1. CUG 10k Gratis Nlp & SMS
2. CUG 20k Gratis Nlp & SMS (Corpo)
3. CUG 20k Gratis Nlp & SMS + 512MB
4. CUG 20k Data
5. CUG 35k Data
6. CUG 40k Nlp + Data