Modifikasi Bullet List Default

Malam All

Team [OBC] kali akan membahas request dari komentar sahabat tentang Bullet List Default pada bloger yang akan dimodifikasi. Fungsi bullet list diterapkan pada suatu postingan jika artikel tersebut memerlukan beberapa sub/bagian penjelasan dari sebuah uraian atau kategori. 

Secara umum ada tiga bagian bentuk/jenis list , yaitu : Bullet , Numbering , dan Alphabetical. Tapi kali ini kita akan memodifikasi salah satu dari ketiga jenis list ( Bullet ) yang ada pada blogger . Pada umumnya jenis list default blogger berbentuk lingkaran bulat berwarna hitam seperti dibawah ini .

Sebenarnya bullet list bawaan blogger tidak begitu jelek tapi banyak para blogger yang menggantinya dengan icon atau gambar, supaya postingan mereka terlihat lebih menarik. Bagi sobat yang ingin merubah penampilan bullet list nya silahkan ikuti tutorial simple dibawah ini. 

Kustomisasi 

• Sign In ke Blogger 
• Pada menu dropdown , pilih Template
• Sobat akan dibawa ke laman Blogger Template Designer
• Klik, Advanced dan pilih Add Css 

Copy paste kode dibawah ini pada kolom yang tersedia

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyR6R52EXNu-7FxagOxT81ANig5lq0JavO9Pmb-_-9cd2dOmXUi3DGC4MN7LIjt_FLXCuxmqLWLI7nDh5xQo3SxhLi9J6ncxwLrmIT7qhTkgOL5hPgc61eQGnbzZ_eHO6gzkaPi7yAW5Pn/s1600/bullet_tick.png');
}

•  Terakhir klik Apply To Blog

Sobat refresh atau reload untuk melihat hasilnya. Kode Css diatas akan menampilkan Bullet List seperti dibawah ini.

Kalau sobat ingin tampilan yang berbeda , silahkan gunakan URL gambar dibawah ini 

• Bullet gambar panah

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc28cc26bDUFgMGvBTn-6MQGfPOPfgsFEdeNl-p_PfZLMaKrX-ul9CbMDqorEfD0xKP0o46jumuDMzEQ6zqHudEN64GDJocXKNwavB2Y3jwkpIquParR4_p9W3qm1mn-SdW4unoYpPLYEq/s1600/bullet_blue_arrow.png');
}

• Bullet gambar error

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifWT16SW9GRVYuRlmGhKrX3uIRRnDBuMjfsHKxrC8S845wpbkhLb1KwCBJVYjfGIT_tcrWl3mQ2_TFUBJ8gXzPOfAaD1oWi4oRU5xnKG1z3kaK5p1gmvJxNFZQ3EOhiOOVc2Fm8n2jngX3/s1600/bullet_error.png');
}

•  Bullet gambar rumah

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRPfvNIzm_SwH-bSOOLWZm-b6LYiuvvYETXuXaJo_6kMKHqIsOBGxrIzGSIwxGdRvqv1cDB5Q1pbJ8c3kC9FcTWnJGRH-pFbXwp1MlUPXT7C6WLzMQsjqQYhz7t_kc6yuKOWjDiFzLGBn/s1600/bullet_home.png');
}

•  Bullet gambar bintang

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOX2M9Gm4eIcOks5xd5c1mXUWY9DRuShrrkrDNnxhutvzvBqLqFTDeox6YtHPkLHJlLZMF07BeRzG4RlU0V_fQ7rCBk_fWAIdsqu5J0lLv03qcf6-ruzhyvN6Bu5njLPwaFgXMaiSqrd4/s1600/star_bullet.png');
}

•  Bullet gambar green plus

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK2VtuXMAvgWxDwCkq0kR1cd4p8Vbxf1V3l3aj4VclA_VK2ZlCSqTP20rsiZykpJigJycbyM_Exfn3UuD3QEu9Qxbli7VV68BSxEYLvPwBQKl1P18lQBYC86vA-0kWdcrZjYVqJrN7Jj4/s1600/Green+plus.png');
}

Atau sobat ganti dengan ikon gambar sobat sendiri.