Mengganti Bullet List dengan Image Menggunakan CSS

dalam suatu web pasti dibutuhkan Bullet List list untuk merapikan atau mengurutkan menu,daftar,prosedur dll. Namun Bullet List akan terlihat kurang indah jika menggunakan tampilan Bullet List yg standart!, Oleh karena itulah, disini saya akan memberikan sedikit ilmu yang saya punya untuk mengganti tampilan  Bullet List menjadi image/gambar.

adapun caranya seperti berikut:

1. pertama kita buat tag unordered list/<ul> nya di file html, adapun nama filenya terserah anda, disini saya memberi nama “Bullet.html” pada file html saya, buka file html yang sudah anda buat di notepad atau aplikasi lain untuk pengcodingan.
2. buat rancangan setandart html seperti ini:
3. kemudian kita buat Bullet listnya di antara tag body, buat tag unordered list/<ul> html nya seperti ini:
4. maka hasilnya akan muncul seperti ini:
5. tmpilan unordered list di atas adalah tampilan standart, adapun cara memper indahnya kita akan mengubah unordered list dengan gambar mengunakan CSS.
6. sebelum kita buat CSS nya, kita tambahkan dulu link CSSnya di tag head, seperti contoh berikut ini:
7. setelah kita tambahkan link CSS seperti di atas maka sekarang kita tinggal membuat file CSS, adapun nama filenya sesuai dengan yang kita ketikkan di link CSS pada file html, di sini saya memberi nama “unordered.css”, jika sudah di buat maka sekarang barulah kita edit linknya melalui CSS.  buka file “unordered.css” di notepad atau aplikasi coding yang lainya.
8. buat script CSS spt ini:
9. ohww iya, sebelumnya kalian siapkan dulu gambar untuk mengganti bullet list, letakkan gambar dalam satu direktori dengan file html & css yang baru saja kita buat, disini saya menggunakan gambardengan nama ul_1.png.
10. jika sudah maka hasil bullet list yang baru kita buat tadi akan berubah menjadi gambar ul_1.png seperti ini:

 guwhampaang khaan......