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:
1. Login Blogger Sobat
2. Template > Edit HTML > Expand Template Widget.
3. Cari kode ]]></b:skin> taruh kode berikut tepat di atas kode tadi.
<ul>Nah, inti pada Tutorial ini adalah mengganti gambar di samping teks list. Yang hasilnya nanti akan seperti di Blog ini.
<li>Contoh 1</li>
<li>contoh 2</li>
<li>contoh 3</li>
</ul>
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 :)
NICE SHARE SOB THANKSS
ReplyDeleteOk, sama-sama :)
DeleteBerkunjung nih bang disaat hujan lagi turun,mantef tutornya tuh bang..hahhaahyy
ReplyDeleteini nihh tutor yang baik.. Nice gan :D
ReplyDeleteselamat pagi plend ijin baca artik yang menarik ni,,,,makasih sudah berbagi salam sucess
ReplyDeletekalo ul atau li nya pengen diganti pake simbol gambar sama juga gak kang caranya hehehee.... :)
ReplyDeletenice post :)
Sama mas... tinggal di ganti link gambar symbol aja.. mudah kan?
Deleteowh, 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
ReplyDeleteIya, thx mas Eka :)
Deletesaya hampir tidak pernah menggunakan fungsi ul li ini.. :)
ReplyDeletekarena pake fungsi BR aja.. :D
fungsi BR kan fungsi "ENTER" benar 'kan? Apakah bisa di gunakan untuk Lists?
Deletekeren gan tutorial menarik
ReplyDeletesudah sy pasang tp koq bulletnya tetep nongol.
ReplyDelete