.

Cara Mengganti Bullet List Di Postingan

Cara Mengganti Bullet List Di Postingan
SHADOWS || Untuk melengkapi postingan saya agar penuh dan mengejar target, pada pagi ini saya akan share kembali untuk mempercantik dikala sobat membuat postingan agar tidak selalu monoton membuat artilek dengan Cara Mengganti Bullet List Di Postingan sobat. Sebenarnya sangat gampang sekali sobat lihat di bawah ini.

Ini adalah bentuk asli dari bawaan blogger yang berbentuk bintik hitam:

Bullet List Di Postingan

Sebenarnya tidak jelek jelek sekali menurut pengamatan saya, tetapi yaitu yang saya sebutkan diatas tadi monoton. Nah marilah kita mulai dengan Bagaimana Cara Mengganti Bullet List Di Postingan dengan mengikuti langkah dibawah ini.


  • Sign In di blogger.com
  • Pada Menu drop down, pilih template
  • Klik tombol Costumize
  • Sobat blogger akan di bawa ke laman Blogger Template Designer
  • Klik Advanced dan pilih Add CSS
     
Bullet List Di Postingan 1

1. Lalu copy paste kode dibawah ini:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhwS9f5ocjk_wxf8DN1qTn9ex3DnqAs3gOrt5p_l62wRv0EdV6YGO5HZeDBkugyqhOS4SUktMDyH5QyP20gpUVojJ2JcwjThNe76zSXBdKGznGaLNUSSWmbNR9Hz29vErgkyCNL99RTE/s400/255.gif');
}
Terakhir klik tombol apply to blog.

Refresh atau Reload blog sobat blogger untuk melihat hasilnya. Kode CSS di atas akan menampilkan Bullet List seperti gambar yang ada dibawah ini:

Bullet List Di Postingan 2
Jika sobat ingin bentuk yang lain saya ada sediakan beberapa bentuk silahkan sobat coba.

2. Bentuk bullet gambar panah:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjsjQMQ3Iv4wokG248XFFlEucpvboE-01K_mMJLlc1B06URmrnNtmeeQ6MjWlFZwAtGfP6wVVO0Gg6BylwogEtNd3AAMTpXWx1wSi9vDaKTHIWgASYSNFXeSwChPDuxuuQjebXU5MHazBd/s1600/bullet_blue_arrow.png');
}
Bullet List Di Postingan 3

3. Bentuk bullet gambar rumah:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitjk9uqTXXKaGbqCoQm6N3ePQjyq3avfdbRkCoArOq1Wj35-Rf4ijlGRbjUxRjFnMXhW429Q9HZFNDSkW64BR2jKke1Lzpr467wlUdsakzgfsVvggrPWgpYf6EDPw-xyr1kDUL1UV3prx/s1600/bullet_home.png');
}
Bullet List Di Postingan 4

4. Bentuk bullet gambar centang:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6m8QaAye7UCeTyqoBOkTsyB-X32qoUZepd6zXFJDYx2-dXuf5i1bNvnZnQ8Dg2-MZhskkSAUq4BLUsPRCu6E4JmgSdnS55-1EYsdjkgalskyoubDxxTJWThqerky25gP_sBqMEbIywrLf/s1600/bullet_tick.png');
}
Bullet List Di Postingan 5

5. Bentuk bullet gambar bintang:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6LCg1ykqU4Ee_7f6VVeawvgMUxerIiQU5rWGMr9xck9U99FmWTSR534L9kVHzMPI-t1QRKsTkPxBTkye6unSWZmAFEBeKe2AuF6teMBHMd4eEWpxS53uci7remASXL31wxsVN-z6QZg/s1600/star_bullet.png');
}
Bullet List Di Postingan 6

6. Bentuk bullet gambar love:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cZxAGwz4ciVSOI9tHSA9wq2hsHKNpBNVwIecbsMTSGtRaoyz7BNbOshYuB-O6jX3eJeZc9mikfw0jj97BWVEv6Co6IocHVXXmzGw55ZTGNUJGj9DAxQRgCrH2pQriCb3K6vPhCgC37k/s1600/Love+icon.png');
}

Bullet List Di Postingan 7


7. Bentuk bullet gambar plus
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdJledy1JY9IIFkynTed0HqQilYMlHMjTVu69DU5VDD_BLwnai8phVf6fQ32NNzLOuDIO16aOHkei_G7UQR4oDAUr26mf81wws2Sz5iHXkprmFu9DGmCHVvM95vaeDTTEOcZa190xm08/s1600/Green+plus.png');
}
Bullet List Di Postingan 8

Nah selesai sudah Untuk Bagaimana Cara Menganti Bullet Liat Di Postingan semoga bermanfaat untuk sobat semua.

3 komentar:

  1. Mantap Saya lagi nyari nyari tutorial ini mas akhirnya ketemu disini,jadi nambah ilmu nih mas langsung di aplikasikan pada template blog saya. owh iya kalau menerapkan pada template yang bukan default bawaan bloger bisa ga mas..?

    BalasHapus

> NO ~ Sara, Porno, Hujat, Provokasi, Hargailah Sesama.
> NO ~ Promo ( iklan ), Spam, Link Hidup, Akan Langsung Hilang
> Berkomentar Sesuai Topik Tidak OOT, Agar Kita Semua Bisa Berbagi.