Modifikasi List Bullet dengan CSS

Selasa, 24 Juli 2012

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkaHFGo9e4qMsOLeiaQuTSK4g63Kd52byIx6J8qiNBlaJ-FK8657y-g8OjMBrRass-nCT-vNnRfnsEegPbNdPIlwTen6_NMbYfqyggZ7X5Tpb13EQ5SlFr0Imxa9d3OJHvLabNeoK-uc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoRV8nOSWRIh8CqThTma8sjKGcxEY3mNWa-aH0Y-jYe0t4oIM3tAwkkhR1E067GiOMGjHhlAMOwxE6dp9mwKgIq7X-R6Yo2U9hWCborKVCvM2_ydX_2tcViInLhe6mYx4JWoElkTGU22M/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.

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Modifikasi List Bullet dengan CSS. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

<a href="http://bungkaryo.blogspot.com/2012/07/modifikasi-list-bullet-dengan-css.html" target="_blank">Modifikasi List Bullet dengan CSS</a>

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Modifikasi List Bullet dengan CSS

Share this article :

BlogKaryo