Costumasi Gaya Bullet Daftar Dengan Gambar Efek Hover

Membuat bullet dan nomor dalam dunia blogging tidaklah sulit seperti yang dibyangkan sebelumnya, kayak Kang Onk pertama kali mengenal blogger...hehehhe, buka kartu dikit. Sebenernya di hampir semua blog sudah tersedia fasilitas penambahan bullet and numbering (nomr) secara mudah dengan meng-klik iconnya saja, tapi bagi temen-temen yang lebih senang dengan tantangan atau mungkin ingin lebih berkreasi dengan bullet and numbering, bisa melalui HTML.

Disini, Kang Onk akan memberikan tips bagaimana membuat Bullet yang menggunakan icon (gambar) disampingnya. Langkahnya tidaklah sulit seperti tutorial-tutorial blogger yang lain.

• Blogger > Layout > Edit HTML


• Search For ]]></b:skin>


• Copy paste kode dibawah ini diatas  ]]></b:skin>

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjydddmw10_Bx7AX8JjtPpIA_SUKx1tpZkz4nX8jXUaJPVivU2xwmBg_eNIYK33nM3xmWTBpjZB8x73gXy3z5fFJ-c8Y5cZLIR__MC73UuScz37oKADfIXIaz_nmaWGz963WnVr5VPjeME/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDGW5x0oPp77jHSx4iQrdpNf0FIPj_RqmmTHM0Kawk5tJQOwzlzajwjwA77fEIGlIEkcP9Nxw10jT-chMhDQauvngW1ztXkNRqbI7gnQn-nRwXTgyJ44NIyOD15r7STFiXiJS3So5poM/s400/261.gif) no-repeat scroll 0px 4px;
}

• Simpan Template dan lihat hasilnya

Catatan : Silakan anda ganti teks yang berwarna biru dan yang bercetak tebal.

Selamat mencoba dan berkreasi.....!!!