Cara Mengganti Bullet List Pada Postingan Agar Lebih Menarik

Pada umumnya, bullet list yang ditambahkan pada saat pembuatan sebuah postingan pada blog adalah berbentuk bulat hitam (default) dengan posisi yang agak menonjol ke dalam sekitar 1,5 cm dari pinggir kiri postingan, namun, bullet list ini ternyata bisa dimodifikasi dan menjadikannya lebih menarik seperti menjadikannya menjadi gambar atau icon-icon lain. Berikut contoh bullet list yang default atau standard :

Dan ini adalah contoh bullet yang sudah dimodifikasi :

Live demonya di bawah ini

• Sorot pointer mouse sobat kesini 1


• Sorot pointer mouse sobat kesini 2


• Sorot pointer mouse sobat kesini 3

Bagaimana, sobat tertarik untuk memodifikasinya? Nah pada kesempatan kali ini, saya akan berbagi tips kepada sobat untuk merubah bullet di atas menjadi bullet dengan efek yang bisa berubah pada saat bullet tersebut tersentuh oleh pointer mouse. Well, langsung aja yuk simak bagaimana cara memodifnya...!!!



1. Login ke Blogger

2. Pada menu Dashboard, pilih Template » Edit HTML

3. Copy kode di bawah dan pastekan tepat di atas tag ]]></b:skin>

.post ul {list-style:none;}

.post ul li {line-height: 1.1em; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRASa4XjYrkVxNeXBdX3oQ98gJmRXXBJ9AQRnlP-ZA1yK4YW0s9yLeqIFooeDjipBer6MLxo3Q6lwXUpm-V-4TezGXa4G6TFFMB5mNXvMskVTm5zIhXNIBZ1Bcbjdi0X4-QbSg0xh7Ncw/s1600/uncheck.gif) no-repeat scroll 0px 4px;padding: 0 0 0.8em 20px;}

.post ul li:hover {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibTE1tuVcbt97Hw7mr5w8LzelLSKnvx4SmKCnzNbTTdENa-iAH7FmYTG14EMZVS3bgPrUuACizp6rxTBH3rPz7avLEhw9rmdP4thyphenhyphenQz8ZG24ShModPEsra_TLghxHtEe-u_bBoSmKsezE/s1600/check.gif) no-repeat scroll 0px 4px;}

Keterangan :


URL warna Merah adalah url gambar bullet pada saat bullet tidak tersentuh pointer mouse



URL warna Biru adalah url gambar bullet pada saat bullet tersentuh pointer mouse

4. Simpan Template dan lihat hasilnya