1 Cara mengganti bullet list pada blog menjadi menarik

Untuk membuat tampilan blog anda semakin menarik,pertemuan kali ini saya akan berbagi trik bagaimana mengganti tampilan bullet list pada postingan blog.Pada dasarnya tampilan bullet list pada saat kita membuat postingan adalah berbentuk bulat hitam.
Gambar dibawah ini adalah bullet list secara default pada blog,yang akan kita ganti dengan trik yang akan sampaikan :D

Untuk mengganti bullet list yang pada dasarnya default pada blog bulat hitam,disini kita memerlukan dua gambar,yang pertama sebagai latar belakang,yang kedua sebagai tanda centang.Oke sebelumnya ini adalah link gambar yang saya gunakan sebagai bullet list yang baru nantinya :

1. http://i1143.photobucket.com/albums/n629/gerduren/uncheck-1.gif
2. http://i1143.photobucket.com/albums/n629/gerduren/check-1.gif

Tenang gambar tersebut tidak akan membuat loading blog anda berat,menurut saya itu juga,tapi jika anda ingin mengganti dengan gambar yang anda inginkan silahkan :D
Yups...inilah script dan tata cara yang akan kita gunakan untuk mengganti bullet list pada blog :D

• Pertama cari script ]]></b:skin> pada template anda,setelah ketemu copy script dibawah ini :

.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;

•  Setelah di copy,paste script tadi SEBELUM ]]></b:skin>
• Sekarang save template anda,dan coba membuat satu postingan dan lihat hasilnya :D

Catatan :
Pada saat membuat postingan atau entri baru memang tampilannya masih bulat hitam tapi jika postingan yang sudah anda buat dan di publikasikan maka tampilannya seperti ini :

Hasil diatas adalah bullet list yang telah kita rubah,saat kotak disorot dengan kursor maka pada kotak putih tersebut akan ada tanda centang :D

Tweet

Komentar →