Cara Mengubah 'Bullet List' Posting Blog Admin : Unknown

Cara Mudah Mengubah Tampilan 'Bullet List' Pada Posting Blog - Sering kali kita lihat tampilan bullet list pada blog kita masih dengan tampilan default / masih bawaan blogger. Pastilah bosan dengan tampilannya yang hanya tanda bulat hitam. Mari kita coba ubah dengan tampilan yang lebih keren. Sebelumnya pastilah sudah banyak yang tahu dengan tampilan berikut,karena sudah banyak para teman2 blogger yang memakainya. Dan kali ini catatansaif akan bikin tutorialnya, semoga dapat membantu memperindah blog sobat : 

Demo bisa dilihat dibawah ini :

• Lihat ini
• Lihat kan
• Lihat Lagi

Pada tampilan bawaan akan nampak seperti pada saat kita posting dan memakai bullet list seperti gambar diatas.

Catatan : " Efek Bullet List akan bekerja saat posting sudah di publikasikan, dengan kata lain saat dalam penulisan posting tampilan akan terlihat biasa,namun sesudah dipublikasikan tampilan akan berubah ."

Cara penerapannya :

1. Masuk setelan >> Edit Html
2. Cari kode ]]></b:skin> gunakan CTRL+F untuk mencari.
3. Copy Kode berikut dan paste letakkan diatas kode ]]></b:skin> :

.post-body ul,
.post-body ol{margin: 1em;padding-left: 1em;}
.post-footer ul{margin: 1em;margin-top: -0.5em;padding-left: 1em;}
.post-body ul li,
.post-footer ul li {
list-style-image: url(http://i1143.photobucket.com/albums/n629/gerduren/uncheck-1.gif);
border-bottom: 1px solid #ccc;padding: .2em 0 .2em .5em;}
.post-body ul li:hover,
.post-footer ul li:hover {cursor: pointer;
list-style-image: url(http://i1143.photobucket.com/albums/n629/gerduren/check-1.gif);
background-color: #f2f2f2;color: #B1291F;

Catatan : 

• kode hijau adalah warna background saat disorot.
• kode merah adalah warna tulisan saat disorot.
  
• silahkan ganti kode warna sesuai keinginan

4. Terakhir simpan dan lihat hasilnya.

Update 2016 

Cara diatas akan cocok dan tampak cantik pada template berbackground putih, namun jangan khawatir masih ada cara lain, sobat bisa gunakan kode dibawah ini :

/* Bullet*/
.post ul { margin: 5px 0px 5px 10px;padding: 0 0 0 10px;list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyr8Uv3r_UJYkA8OYYlG8WKWl3gky3t7wyqLmKp2K1k_4VFuHNj5Ld3MGstmUKalte6iwvK48wtaMXX8-HK_X93V0PZBGviHuXpcZ09mUHNxnaetppX41vbslPKD01CmlxsrjY8Nz5E5oP/s1600/ic.jpg);}
.post li {margin: 0 0 0 3px;padding: 3px;}

Letakkan kode tersebut diatas kode ]]></b:skin>

Kode warna biru diatas adalah Url gambar, sobat bisa ganti sesuai keinginan, dengan catatan ukuran gambar sudah disesuaikan.

Mudah dan cepatkan.. demikian tutorial kali ini semoga bermanfaat,dan silahkan jangan segan segan berkomentar jika ada yang ingin sobat tanyakan. Kritik dan sarannya sangat saya terima dengan senang hati. terima kasih