Artikel Terbaru :
Home » » Cara Mengganti Bullet List Di Blog

Cara Mengganti Bullet List Di Blog

Saturday, November 10, 2012 | 9komentar

Cara Mengganti Bullet List Di BlogSalah 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!

Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

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 saja Tutorial Blogspot 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
    Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog,Add CSS
  • Copy Paste kode berikut pada kolom yang tersedia
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHo9T7AERKolh_evV1W0M3OnrGYrnp5JDq3Uq6Jdh-b5uB42psMmojio1IKIuNtwQbBFcm4AbXvyBnV5Mho6UyUv98e3eAzbxg9s4p6P9yGejvzRTq6MDgmZAQICZBPwD4_SoeL4_4WVU/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.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

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

Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

  • Bullet gambar panah
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih1cUXOQLcyIW0jOUwK8bKnkQZeCPG8PkziXWolskqmUKF_K2Mec-clnAnMtgWBIPhs9hTaJrIAmcUJ81O1TuU0L5dK-2n3VKBAGz1cEPk4YU-cEzD3xpoTJKDXTPyO9EWmMTauxqURv2A/s1600/bullet_blue_arrow.png');
}

Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

  • Bullet gambar Error
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwciMv-jerXtA8zlb5d6W9tf-Z5HHdq0VUVy4OkoXFvCumwkL2fwpHSmWDK7lGUgNKr42nzU0kZTPaGqMO4fTU2UhFyCX7TYzTbCTo-Al4PyWbZOMHMkhSI62U33r2V5CEET1Er-FmMlb/s1600/bullet_error.png');
}

Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

  • Bullet gambar rumah
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOMiVZ5YGFOK26LBXXlLJkD9Z6tU4sIeY_QxatEVuk3AennEQZRQ_3CI0HA3y4uA03sQD3GFwc8Ct-AXynFcBGovKaWSQy4fY49-4g9d7HiCoIhBRtiJZFOLp3JeMLRwtHVxQ2XRXBIJL/s1600/bullet_home.png');
}

Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

  • Bullet gambar tanda centang
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQegBTeXYejtcdhKi6V_iXyV5kDOA89xZ5sGC5ycK-A5WykKvcACHPW5hwyKgxlAUA0j8wRskNbjFZz4Cp6w_xoWArU3e6kSsjSzJrnZj2AiMh9O8Y3e5FzIrrL6eFGgxKFeP4sg7Bp91/s1600/bullet_tick.png');
}

Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

  • Bullet gambar bintang
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJNz5NLTg0wA6hVNz7RWcJeUqggaLf309oZBtVnWQGzl3FhVUHzmb-m73iV2mDaI_eip_1ITKUxOHlMwEq_8U-F6rTCS6y3Cwnab6MhNfVU8D0XYTISyxnxyz-unZcA0bLU_2_suHvv0/s1600/star_bullet.png');
}

Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

  • Bullet gambar cinta
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCLky9jBEOU6b8rdx1weGm_AtQ50i7gRsDnrYQNSChJPfU-JmfmsO06YaHeagUPTBs3l2h1d7OarilZAdc4zDNftaMOO07KKRrs691jk1Y_QcTs89oV-3uN0yN41ZJYStxw_R-qOseFBs/s1600/Love+icon.png');
}

Bullet List.Bullet,Bullet Poit,cara memperindah blog,blog indah,blog cantik,cara mempercantik blog

  • Bullet gambar plus
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgHwDwN98fjIcXnwRyFlrQAxn8LDgtudfAJbqKbjy7-wgfHm6QWQPsgLgeIY74HsyhIXsKkc1Mh8OI3NfrO3gRxcYjw0sJugeHCSAIiZHeLMyI_4qfdB7Q2TWCVogQoH9QW46mMbCHhvY/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
Selamat mencoba
sumber:  http://ilmukujugailmukalian.blogspot.com
Share this article :

ARTIKEL TERKAIT:

9 comments:

  1. Kren banget blognya mba, gimana caranya bikin atap-atap gicu :D. pake lampu, benar-benar kelihatan unik.

    ReplyDelete
  2. wah keren juga ne...
    coba dulu ah di http://thephatar.blogspot.com
    oiya kra2 pengeruh gak ya sama loading blog tar?

    ReplyDelete
  3. Manteb banget Gan, saya pengen sekali punya widget Artikel Terkait persis milik Agan ini yang animated dan ada garis berupa titik titik itu. Bisa gak Agan kasih scriptnya, soalnya saya newbie banget. Makasih sebelumnya!

    ReplyDelete
  4. Mantap... thnks infonya bermanfaat nih

    ReplyDelete
  5. terima buat postingannya kakak admin :)

    ReplyDelete

Silahkan tinggalkan komentar sobat , tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

 
Support : Copyright © 2011. Tips Trik Blog | Dan Cara Buat Website - All Rights Reserved
Template Modify by Siti Saleha
Proudly powered by Blogger| Thanks For Visiting