Modifikasi list bullet dengan css

Hemmm ada request_an dari admin blog Harrys76 mengenai list bullet di postingan. list ini default nya berbentuk bulat mungkin ada beberapa rekan blogger ingin menggunakan model variasi sehingga gak bosen liatnya, nah di postingan kali ini saya akan share hasil editan saya seperti yang di minta oleh admin Harrys76 okeh mari kita langsung ke tkp.

1. Masuk ke Template blogger ( baca: Cara masuk ke dalam 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/AVvXsEiGA4EqThNpXKZNx9B37whTk48JEuJ864DjDZrKWtE4qC5nV6fE6DCFYIpamSFKvJkPkmZp8gKZHkPKqNm_yyo7j_TJKovesljwcHXXUTZKcE5fjXbO9sfXofuDHgzAjSkg-FwnIkkZrtE/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/AVvXsEi2LZ0irXXNcv8192rqjyR76idrqPNCv6C7AgvocEYqpomeyLq5pt2rbefuWn4w1xe3yJA8Ptpkv8gHOYU-USj5seAF4yHtqyXZ2UfPL9K4cvQdCaHFOIJEpmupwYvqBm5vqiz-7iHJxwY/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.