Mengatur Style Bullet Unorderer List (UL)

Bullet biasa digunakan untuk menjelaskan informasi yang berbutir. Biasanya bullet ini berbentuk bulat. Namun, anda bisa mengubahnya menjadi gambar seperti gambar dibawah.
Pertama-tama, bikin dulu gambarnya. Tak perlu besar-besar karena gambarnya adalah gambar untuk daftar berbutir (bullet). Sekitar 20 piksel x 20 piksel saja cukup. Kalau sudah, upload gambar tersebut ke image hosting. Lalu, kita mulai tutorialnya.

Ayo kita mulai.

1. Kita login ke Blogger terlebih dahulu. Lalu, klik menu Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:
]]></b:skin>
4. Diatasnya, ketikkan kode berikut.
/* Unordered list style */
.post ul{
list-style-type:none;
margin:10px 5px 10px 0px;
}
.post ul li{
background: url(URLGAMBARANDA)no-repeat;
padding:0px 0px 5px 25px;
}
Ganti tulisan URLGAMBARANDA dengan URL alamat gambar anda. Lalu, anda juga bisa mengatur paddingnya. Cukup ganti yang berwarna merah dengan jarak sela (padding) yang diinginkan supaya gambarnya klop dengan teksnya. Yang lainnya tidak perlu diganti.
5. Lalu klik tombol Simpan Template.

Akhir kata, semoga tutorial ini bermanfaat.

Komentar

  1. Assalamu'alaikum....infonya terimakasih..mas
    Ane aplikasikan ah......

    BalasHapus
  2. wah makasih infonya sobat,,,,

    BalasHapus
  3. mejeng yang keempatxx deh, hehe^^
    btw thanks atas ilmunya Mas Doy..

    Sukses selalu dan salam blogger :D

    BalasHapus
  4. mantepp nie infonya.... untunk ngeronda di temptnya mas doy...

    untuk ukuran apa harus 20 px nie.....?

    BalasHapus
  5. setalah tidak terlalu sibuk di dunia offline,, langusng menyempat kan koment di tempat mas doyok,,
    wah ketinggalan banyak artickle mas doyok nich...
    di baca satu2 dulu mas

    BalasHapus
  6. simpel tapi keren mas doyokk makasih triksnya mas doyk mau saya coba ni,,,

    BalasHapus
  7. tutorial yang sangat bermamfaat .. perlu dicoba nih
    bravo mas

    BalasHapus
  8. bagus juga tuh buat alternatif style dalam postingan blog, n gambarnya terserah kita ya mas? Tar mau nyoba ah, tapi gambarnya yang cocok apaan ya jadi bingung nih aku hehehe. Btw thank infonya mas

    BalasHapus
  9. salam sahabat
    ouw bisa tah bagus infonya thnxs ya

    BalasHapus
  10. keren nih... sudah saya coba.... mantaappppp

    BalasHapus
  11. @kecoak
    sipp
    semoga bermanfaat ya :D

    BalasHapus
  12. @rizki
    heheh sippp :D
    makasih postnya

    BalasHapus
  13. @abu
    semoga bermanfaat saja
    ya
    monggooo

    BalasHapus
  14. @berita
    semoga bener bener terpakai ya :D

    BalasHapus
  15. @seputar
    sipp
    baiar lebih menarik :D

    BalasHapus
  16. @andy
    ya gambarnya terserah kita :D
    seusai keinginan kamu saja

    BalasHapus
  17. @erge
    makasih kang
    makasih kang rizki yg udah post ini :D

    BalasHapus
  18. @dogan
    silahkan langsung ke TKp saja :D

    BalasHapus
  19. @ican
    monggo
    semoga tetap terkejar ya :D

    BalasHapus
  20. @tubir
    gak mas
    itu utk kerapian saja :D

    BalasHapus
  21. @local
    salam blogger juga mas
    semoga bermanfaat ya :D
    terima kasih

    BalasHapus
  22. makasih banyak mas ....saya slalu ke sini mengadu masalah modifikasi blog...

    BalasHapus

Posting Komentar

Postingan Populer