Cara Merubah Tampilan Bullet Dan Numbering List Pada Blogger

Seperti yang kita ketahui, tampilan dari numbering dan bullet yang disediakan default memang seperti biasa biasa saja. Dan bagus nya adalah kita dapat mengkustomisasi tampilan Bullet dan Numbering nya, dari yang tampilan awal nya biasa biasa saja bisa kita ganti agar terlihat lebih enak di pandang. Bullet default yang disediakan sama seperti bullet pada umum nya begitu pula dengan numbbering, bullet hanya kecil dan berwarna hitam, sama seperti numbering hanya teks angka yang berwarna hitam.

Disini kita akan merubah tampilan mereka agar berbeda dari tampilan default nya. Yang pasti akan jauh lebih enak di lihat nya dari tampilan default. Berikut adalah beberapa contoh dari tampilan teks yang menggunakan bullet dan numbering yang di beri kode CSS.

1. Contoh teks menggunakan Numbering

• Contoh teks menggunakan Bullets

Nah kiranya seperti itu tampilan dari bullet dan numbering setelah kita beri CSS ke dalam template. Langsung di sedot praktekin aja tutorial nya :

Step 1 : Masuk ke template dan kemudian edit HTML, Cari kode  </b:skin> lalu copy kode di bawah ini kemudian paste tepat di atas kode </b:skin> .

Kode CSS untuk Bullet

.post ul {
margin: 5px 0px 5px 10px;padding: 0 0 0 20px;list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtkLxymCR83bBuMhJzT3CbtGQ0hGyJvZoGvUZMWJpziTpag8ChP3wM7o6DNy0w26tkp6kZqtNwA_AVSwMKySAB72k8vLnvN6V43mrQEPuJUHBZQ7SQSCKGkBy_J7ZYxf6xWDZaARZfrw_8/s1600/bullet_tick.png);}
.post li {
margin: 0 0 0 10px;padding: 3px;
}
.post li:hover {
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtkLxymCR83bBuMhJzT3CbtGQ0hGyJvZoGvUZMWJpziTpag8ChP3wM7o6DNy0w26tkp6kZqtNwA_AVSwMKySAB72k8vLnvN6V43mrQEPuJUHBZQ7SQSCKGkBy_J7ZYxf6xWDZaARZfrw_8/s1600/bullet_tick.png);cursor: pointer;
}

Kode CSS untuk Numbering

.post ol {
font-family: sans-serif;
color: #706969; }
.post ol li {
line-height: 1.2em;
font-family: sans-serif;color: #289728; }
.post ol li:hover {
font-family: sans-serif;font-style: italic;
font-weight: bold;
color: #0080ff; }
.post ol p {
font-family: sans-serif;font-weight: normal;
font-style: normal;
color: #0F0E0E;
line-height:1.2em;}

Step 2 : Buat postingan lalu tambahkan Bullet atau Numbering, kemudian save dan publikasikan posting tersebut lalu lihat hasilnya.

Kustomisasi : Kalian dapat merubah beberapa tampilan seperti mengubah icon untuk bullet nya dengan cara mengganti link url gambar di atas dengan url icon yang kalian suka. Mengubah warna pada Numbering nya, kalian hanya perlu merubah teks color:#xxxxxx dengan warna color html yang kalian mau.