merubah bullet list menjadi keren ~ BlogGuaTau.com

salam sahabat blogger.

kali ini saya akan posting membuat bullet list yang keren.
ada yang ngga tau apa itu bullet list?
ini contoh bullet list.

ayam
kambing
sapi
burung

nah bullet list itu yang bulat hitam.
memang sedikit kurang menarik, maka dari itu di sini saya akan share
bagaimana merubahnya dengan gambar.

nah contoh bullet listnya kaya gambar di atas.
oke langsung bagaimana caranya?

ul.imglist { margin: 0; padding: 0; }
ul.imglist li { margin: 0; list-style-image:url('URL-FOTO'); }

copy HTML di atas ke seperti gambar di bawah ini

dashboard > template> sesuaikan> tingkat lanjut > tambahkan CSS

nah ganti yang berwana merah dengan url di bawah ini.
url di bawah ini menunjukan gambar yang akan menjadi bullet list
di postin anda

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mIpRlkB5x8RhR47cCltW__niu1pzruDfXdaykxdO9PBkA5pdVL6CjaDGAXL7x8PCTGtHuWYz18yGCdDRDHNfA1brQe73QY0yMM0nK-JrMEeHyIOdr65N-89DymXdUJMgTcyV68G_d6Ef/s1600/bullet-point-green-tick.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhik-Nl6AbU62dBP5rH4mGtkT66xLRFcERUYumTU5GK_ITqar7-SSO5GMFM2Xlz_hv_Rf8-h8Kassw6QfB4z0VdrY2paKw0AjCBymKVQQt02Oqop6ePSFmavsXJPrWhYpoP5fGnfui_Xqjl/s1600/bullet-point-image-6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKM1MMuQx5PMyLsscb0zylH6g3DAyyksynb2ZR3w6QkG8wURZaQcnBArrBfnb-zpaB41YAAysa2OA1XC3SgxIYcTVrhqlYfH0qBB-wIK0O_JOww85IjqVvqHhb-4I5MgI6mGWlMpKjo9x_/s1600/bullet-point-image-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSp0g0s0eh3NRDzdE19IKkSAJD9h-c3SHMKqVJXUoMoyJh63MrIbmOG4XkRnpS67VNtyOq_Ei9a7rfvVTpV4OPgUfVV8h-EOAdSlbas4U2BGHLE6GVzlNrdqSyajludqu4hKxUYbgjfzca/s1600/bullet-point-image-4.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7RMDE2FJZILuELDpSHdDSOjtB0i7Uz0XC6wi01HwKpjGD5g3LXCGk47wlPP5OWnRJsYqgttvRB66hKRbvcjvYZSKwc3j_NSpPl1trNYcr5aiFPDt-Bzp_5DqpuxiK6nwZi3rAcHO7byD/s1600/bullet-point-image-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zQIUJAWLynohbYsGF9mXLDA9cxiD9kiAXcfpQf7g_dgiFZzwknh2yUaN-t4MjTfNoCGy4nE01Bsd1AF7itcTn0DW2MF_XPCMykfvc4-uLj_gA-BF1-QAFUJlqq5YsHjvPPgEODydoQwv/s1600/bullet-point-image-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirv_vkY88SK6n14LnaqT5witO8se86sZMOtwU_Kao9R-rTFyYnUnAonLjlQ9YyB7HwoUHCQ7VjwB1hkD19Z60Dmobd8r4K5gGiyo509VC036lyIEroegWnzgKPDSuMMmJie1DHvL6tLJRa/s1600/bullet-point-image-9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkyQFClf6jG2J-NVaaObkh5SqXPQmY3LS2AlmpvsTaYxEGO6Y89tSYWxqj-z3o1_OnVr6xYSRXxvFezoqPiARIAx2CS0q6EtjuqgwfUuMdRCgNs83N1vH2AbrSA4f9Uken5dYLfODl5JH/s1600/bullet-point-image-10.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtVYV83UGQT92pqzNFiZ7qM8QTSxQGhGNPpW0icDPmjCSZntb19CQgDulo1n9yYPLitUPycKsPD4SB0tA8kwPIhuy_OHF0GqsWG1bid4Hryuv-mRMrsHtYSpfa-gavnfF3m30MfmZ_m6T4/s1600/circle-bullet-point-image.png

kalo udah pilih pilihnya jangn lupa save.

nah sekarang bagai mana cara kerjanya?
ketika kamu membuat sebuah bullet list

contoh lagi

jika 1
jika 2
jika 3
jika 4

HTML bullet list di atas akan seperti ini (klik HTML di samping compose)

<ul>
<li>jika 1</li>
<li>jika 2</li>
<li>jika 3</li>
<li>jika 4</li>
</ul>

kamu rubah sedikit agar menjadi seperti ini.

<ul class="imglist">
<li>jika 1</li>
<li>jika 2</li>
<li>jika 3</li>
<li>jika 4</li>
</ul>

tambahkan sedikit class="imglist" di <ul>
ini icon untuk bullet list dan HTML