Catatanku: Membuat Bullet icon gambar di Blog

Apakah itu bullet? Perhatikan teks berikut:

ada 2 macam perubahan materi, yaitu:

perubahan kimia
perubahan fisika

Nah, didepan kata "perubahan kimia" dan "perubahan fisika" terdapat "bullet" atau bola kecil padat seperti "peluru", terserah Anda mau bilang apa.he3x. Pokoknya seperti itu. Dan masih banyak bentuk bullet yang lainnya, bisa gambar, icon, garis panah, dll.

Hal tersebut disebabkan karena Anda memberi simbol seperti berikut:
<ul>
<li>perubahan kimia</li>
<li>perubahan fisika</li>
</ul>

Untuk mengganti bullet tersebut dengan gambar cukup mudah.
1. Edit HTML Anda.
2. Temukan kode

#lateral1 li {

margin: 0px; padding: 2px 0px 3px 20px; list-style-type: none; font-size: 12px; background: url("alamat url gambar") no-repeat left top; border-bottom: none;

}

Keterangan:

Ubah warna biru untuk jarak spasi dari kiri, usahakan jarak ke kiri minimal selebar (width) gambarnya, karena tulisannya bisa gabung dengan gambarnya jika terlalu mefet.
Ubah warna merah untuk url gambar Anda.

Kadang-kadang kode di atas tidak ketemu, karena template tiap blog berbeda-beda, maka Anda bisa menambahkan kode sendiri di bagian "main", "sidebar", "footer", atau di bagian lainnya. Kalau saya menambahkan kode tersebut di sidebar saja, karena sidebar di blog ini banyak menggunakan kode <ul><li>. Caranya, Anda tinggal menambahkan kode.... li atau ul li
Sebagai berikut contohnya:

.sidebar ul li {

margin: 0px; padding: 2px 0px 3px 15px; list-style-type: none; font-size: 12px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1o5I2TXURWS545zyhjMuXowGvowzZWhQ34GmsUL6juzYpKwh6cAFQ4uECdYSpCt-106xdgWVQzqgs1vOmHBCstaP2mxbj_28syYiR94tWBODtt_niRzPozED2tm8hn23rc_7AxLSXDAB/s320/Symbol+-+Check+50x50.png") no-repeat left top; border-bottom: none;

}

dan saya menambahkan gambar-gambar berikut: