Cara Mengganti Bullet List Menjadi Menarik

Oleh Unknown

Sunday 14 October 2012

Bagikan :

Tweet

 

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 :

• http://i1143.photobucket.com/albums/n629/gerduren/uncheck-1.gif
• 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

• COPAS Code Berikut Sebelum Code ]]></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 :
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 :

Tag : Tutorial Blog