» » Cara Mudah Mengganti Bullet List Blogger

Cara Mudah Mengganti Bullet List Blogger

Unknown
Add Comment
Belajar Blog
Wednesday, 7 January 2015
Salah satu langkah yang bisa sobat blogger lakukan untuk memperindah blog atau untuk memperindah postingan sobat blogger adalah dengan cara mengganti Bullet List atau Bullet Point bawaan template sobat blogger. Bentuk default dari Bullet List blogger adalah bulatan warna hitam (Seperti sebuah titik besar). Coba perhatikan Bullet List di bawah ini!
 

a

Itu adalah bentuk Bullet default bawaan Blogger. Sebenarnya, Bullet tersebut tidak begitu jelek tapi banyak blogger yang sengaja mengganti Bullet dengan ikon atau gambar supaya postingan mereka tambah terlihat indah dan cantik. Kalau sobat blogger tertarik untuk mengganti Bullet blog sobat, Ikuti Tutorial di bawah ini.
Cara Mengganti Bullet List Blogger
  • 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

    sada

  • Copy Paste kode berikut pada kolom yang tersedia

    .post ul li {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Wp8JBi1THCl-6qyCrmKy4Vb2QjQILUAyTZk4-krJIr7c-ZU1GBIungx5C1vgVIUt5o-OOksjL7nLdNgtx5zVuiRP8jwPD_qbksu6rtIBUW9S0sx6euKH4jQkc7MjMnsa2eCAin-0Lw/s400/255.gif');}

    Keterangan : Untuk mengganti gambar silahkan ganti kode berikut ini di atas sesuai keinginan sobat

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Wp8JBi1THCl-6qyCrmKy4Vb2QjQILUAyTZk4-krJIr7c-ZU1GBIungx5C1vgVIUt5o-OOksjL7nLdNgtx5zVuiRP8jwPD_qbksu6rtIBUW9S0sx6euKH4jQkc7MjMnsa2eCAin-0Lw/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 :

1

Kalau sobat blogger ingin tampilan yang berbeda, silahkan gunakan kode yang telah kami sediakan:

Bullet Gambar Panah

2
Bullet Gambar Panah

.post ul li {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-lpcvzlEzou1glvi6D-EdBy-CbJouG4_TdfblWGgong069AegmJODMj3KcEi2VZyhdZv_kFIeJ_-DzOUkcJ_oWgBqgjE3ZoCW6eJ242hxnc1C3_NoIIM2Wdx6wp9HL-7kEk99rReWFI/s1600/bullet_blue_arrow.png');}

Bullet Gambar Error

3
Bullet Gambar Error

.post ul li {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-lpcvzlEzou1glvi6D-EdBy-CbJouG4_TdfblWGgong069AegmJODMj3KcEi2VZyhdZv_kFIeJ_-DzOUkcJ_oWgBqgjE3ZoCW6eJ242hxnc1C3_NoIIM2Wdx6wp9HL-7kEk99rReWFI/s1600/bullet_blue_arrow.png');}

Bullet Gambar Rumah

4
Bullet Gambar Rumah

.post ul li {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TwySKfoiPru1sIZmTsO6QLlf2Iz-P1cfJz3yH176xcNV-C9Uboby6el4ZhTW143sX-hWbVRVcjTNuAKkfmnxKCeLMAiIupudtuxKeUd2nSB_1y7NIl_ZLOAKIse2x4-4ia-y9Smvb2E/s1600/bullet_home.png');}

Bullet Gambar Tanda Centang


5
Bullet Gambar Tanda Centang

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

Bullet Gambar Bintang

6
Bullet Gambar Bintang

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

Bullet Gambar Cinta

7
Bullet Gambar Cinta

.post ul li {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-PcS7ckpSgPGUFwUIULtmEd-jZlgk50BheS5zWwPtgTXgKHDl7clI0ITASENOZboqG29KSqF52rPm8Sw1LyEmnKMhFI8uJEyUidcWw3lw3gT4kmDcG8KxQnuhsE2tzw0Cf7bCqWvOw/s1600/Love+icon.png');}

Bullet Gambar Plus

8
Bullet Gambar Plus

.post ul li {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXHLK6fSVjJo9vZkiipiWsU371h-uQLrZ5wI6_Iz1djxW7fTo0bUFUTBsghFrMJ4dHIZ1yZERAerVt3cghIPEBMUk-4zMg1KOOdlX-ckOjrSEMScWShbabHDwtTZaPFjp7B7VpYD7kyQ/s1600/Green+plus.png');}

Punya ikon atau gambar sendiri? Pakai saja gambar sendiri untuk mengganti Bullet Point. Sobat blogger tinggal ganti yang warna merah dengan URL gambar sobat

 Kalau sobat blogger merasa postingan ini berarti buat sobat blogger, jangan lupa untuk meninggalkan pesan atau komentar pada kolom yang tersedia.
Author image

About the Author :

Me its me, no others. I love my mom cause she is my everythings. I learned a great understanding of her mother. I want a woman like you. Smart, strong and full of tenderness ♥

Connect with him on :

0 Komentar untuk " Cara Mudah Mengganti Bullet List Blogger "
Post a Comment