Membuat List Item Bergambar Dengan CSS GM Cellular Komentar WEB Design Tweet

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 :)

---

Ditulis Oleh WEB PULSA CENTER on - Rating: 4.5

Judul : Membuat List Item Bergambar Dengan CSS
Deskripsi : Membuat List Item Bergambar Dengan CSS - Dengan menggunakan CSS , kita bisa lebih mudah dalam memperindah suatu tampilan web/blog yang ...

SILAHKAN KOMENTAR DENGAN FACEBOOK