Cara Mengubah Bullets Menjadi Gambar Pada Website

Halo teman-teman, saya akan mencoba membuat listing dengan gambar seperti dibawah ini. Kita akan mulai mencobanya.

1. Buat folder untuk menempatkan file yang akan digunakan.
2. Pilih file gambar yang berukuran kecil untuk pengganti bullletsnya letakkan di dalam folder yang sama dengan file html kita
3. Lalu kita akan membuat tag HTMLnya sebagai berikut:

 

<div class=”image”>

<ul>

                <li>Bakso</li>

                <li>Mie Ayam</li>

                <li>Kwetiauw</li>

                <li>Pangsit</li>

</ul>

</div>

 

Lalu kita save dengan nama index.html di dalam folder yang tadi kita buat

 

4. Selanjutnya kita akan membuat CSSnya.

 

<style>

                .image ul{list-style:none}

                .image ul li{background:url(‘salju.png’) no-repeat left top; padding-left:25px}

</style>

<div class=”image”>

<ul>

                <li>Bakso</li>

                <li>Mie Ayam</li>

                <li>Kwetiauw</li>

                <li>Pangsit</li>

</ul>

</div>

 

Lalu kita save. Dan kita preview pada browsernya.