Rabu, 25 Juli 2012

Modifikasi List Bullet dengan CSS


1. Masuk ke Template blogger
2. Cari kode ]]></b:skin>
3. Masukan kode di bawah ini di atas kode ]]></b:skin>

.post-body ul {
margin: 0 auto;
background: #def;
padding: 0 0 0 25px;
list-style-image: url(http://4.bp.blogspot.com/-Thrd-5Ufd-U/TlopZd6OSRI/AAAAAAAABso/xnFa43D30r4/s1600/uncheck.gif);
}
.post-body li {
margin: 0 0 0 10px;
padding: 3px;
border-bottom: 1px solid #999;
}
.post-body li:hover {
list-style-image: url(http://3.bp.blogspot.com/-1nWUFcXMHno/Tloo6Sp_dkI/AAAAAAAABsU/ZXrFOIVNUAY/s1600/check.gif);
background-color: #CDE0E7;
cursor: pointer;
}

4. Klik SIMPAN TEMPLATE.

Ketika nanti anda menggunakan list bullet di postingan anda maka tampilannya otomatis akan seperti yang ada pada screenshot.

Jika kode css tersebut ada yang sama di dalam template anda hapus saja dan ganti dengan kode css list bullet yang saya share ini. jika anda gak mau pusing gak usah baca tulisan saya ini cukup sampai langkah ke 4 saja dan selesai.

ini ada masukan dari bang Taufik yang hanya menggunakan css, Namun anda harus membuatnya sendiri secara manual untuk kodenya html nya.

Masukan kode di bawah ini di atas kode ]]></b:skin>

ul.keren li {
  list-style:square;   
}

ul.keren li:before {
  content:"\2714 ";
  display:none;    
}

ul.keren li:hover {
  list-style:none;
  position:relative;
  left:-1em;
}

ul.keren li:hover:before {
  display:inline-block;
  font-size:60%;
  margin-right:8px;
}

Sebenarnya juga gak terlalu rumit ya yang kedua ini cuman anda perlu menambahkan class pada tag ul jadi seperti ini nanti kodenya

<ul class="keren">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
</ul>

Ini Bagi yang mau menggunakan saja, ok segitu aja dan terima kasih.
Agen Bola online Agen Bola online

1 komentar:

 

Tutorial Vicahya' - Just Sharing © 2012 | Template by Bamz Display Pagerank