Cara Merubah Tampilan Ul Li di Blogger



Ul Li atau Bullet Lists atau Symbol Lists atau Lists sebenarnya apa sih? Ya, Ul Li termauk kode HTML yang memberikan tampilan list dan (umumnya) terdapat gambar di samping teks list. Contoh:

  • Contoh 1
  • contoh 2
  • contoh 3 
Maka kode HTML-nya adalah:

<ul>
<li>Contoh 1</li>
<li>contoh 2</li>
<li>contoh 3</li>
</ul>
Nah, inti pada Tutorial ini adalah mengganti gambar di samping teks list. Yang hasilnya nanti akan seperti di Blog ini.

1. Login Blogger Sobat

2. Template > Edit HTML > Expand Template Widget.

3. Cari kode ]]></b:skin> taruh kode berikut tepat di atas kode tadi. 
.post ul li{padding-left:33px;position:relative;background:url(http://png-2.findicons.com/files/icons/1035/human_o2/128/old_go_next.png) no-repeat 15px 3px;background-size:13px;background-position-x:-3px}
NB:

  • Ganti teks Merah dengan Link gambar terserah sobat Tidak diganti juga tak apa. 
  • Sobat bisa mengganti warna teks list dengan menambahkan kode: color:warna; sebelum kode "}"
  • Sobat juga bisa mengganti jenis font teksnya, dengan menambahkan: font-family:jenisteks;.
  • Dll.
4. Simpan dan lihat hasilnya, semoga berhasil :)

14 comments :

  1. Berkunjung nih bang disaat hujan lagi turun,mantef tutornya tuh bang..hahhaahyy

    ReplyDelete
  2. ini nihh tutor yang baik.. Nice gan :D

    ReplyDelete
  3. selamat pagi plend ijin baca artik yang menarik ni,,,,makasih sudah berbagi salam sucess

    ReplyDelete
  4. kalo ul atau li nya pengen diganti pake simbol gambar sama juga gak kang caranya hehehee.... :)
    nice post :)

    ReplyDelete
    Replies
    1. Sama mas... tinggal di ganti link gambar symbol aja.. mudah kan?

      Delete
  5. owh, berarti tetap sama aja kayak tutorial yg di atas ya kang, kirain itu yg url background nya tuk background kotak hehehe... Siip, makasih kang, sekarang sudah paham.. :D

    ReplyDelete
  6. saya hampir tidak pernah menggunakan fungsi ul li ini.. :)
    karena pake fungsi BR aja.. :D

    ReplyDelete
    Replies
    1. fungsi BR kan fungsi "ENTER" benar 'kan? Apakah bisa di gunakan untuk Lists?

      Delete
  7. sudah sy pasang tp koq bulletnya tetep nongol.

    ReplyDelete