Saturday, 27 April 2013

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:


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
     

1. Lalu copy paste kode dibawah ini:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwIABw92HL-Se9Sao0pKUK6ebxUwnEMZ49z52v1Pw40c18kfiBiGYKPQIuuUNNrZyhDg15mmDk1oQGLCE2qbf-30BlE2Mfxt1E8P9oRncFVttLSqmmV6Jl_fNGL_VfPuKRjKoxLwstmcY/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:

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/AVvXsEgkzUbnVHV1Gbi92T3KrsBrdg4MlsSSgmZyiJeVZ3HG_WVPNsMcEYRoxPFOX83LKgs1MJONuMCjiSWgYWXkH0JaIGhKuPn2Cmk6J0yQsoVZ6Sud84eMmQhFplnsjqMHS4-Wr0wjGJhyd9tb/s1600/bullet_blue_arrow.png');
}

3. Bentuk bullet gambar rumah:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6G5UWk2Ffo6pqmyXWEEp6T5SVr6SECdrmdhYzM_luTQA_oB3w6ih8l9o7M8Uea_HT774nAuZbiCqc9uTCajUdfwU4Hbfg2iZjrXIFk87gdMHsfnEOK7X5RmS0qSRJIB6E9Rinyx2Kzst/s1600/bullet_home.png');
}

4. Bentuk bullet gambar centang:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFn0qP8HTNzqoLL5fvHNJDPk0UNjMCbjpEy_LXSFH0af_MDZPD6Vdr_PMQXdv-42ogE7cFYvPO96FUempdyPZ2wRROFvOY-fT3_LtRBe3OsQA60DCvllybYPQ7ZzUgEnYwi69eXn0_sxLr/s1600/bullet_tick.png');
}

5. Bentuk bullet gambar bintang:
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNYvgnvk7T0XXwDx4tN3eJJ03jc_W4dBrKhFenoTGChTv0cGm-kaUHQGXBVoMXgXxgDfQsuTkyZpgLrOrNwDa1ms8BLVlhCEumszE34ic0qAr7i67J3kr5YYEtw49AugKMROCHb3rUWU/s1600/star_bullet.png');
}

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



7. Bentuk bullet gambar plus
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi901brFLkE-V6NbjUEFdUI1tT1Ri77pgPQh1gIiYD51EPgWp8DLzmeONmPRl5oU261O25cbI4GsSe6HkKX2mwcJt64srO9WvlnWOb5gvjIX-Zar8rChuxmOmORCHMJhzsjr5dup7TQZlo/s1600/Green+plus.png');
}

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

No comments:

Post a Comment