Tukar style bullet list

Assalamualaikum ❤

Hari ni aku ada la sikit mood nak buat tutor . Tutor aku hari ni berkenan bullet . Mesti ada yang ternganga sampai tertanggal gigi bila dengar ape kebenda bullet ni . Bullet yee toksah mengedik ubah jadi balet pulak . Bullet ni macam bulat-bulat taik lalat warna hitam tu . Taik lalat kome tu umpama bullet haha . Kalau kurang jelas bawah ni aku kasi tayang rupa bullet sikit, kot-kot ada rupa ayam ke beruang ke kan .  

Mesti korang menyampah tengok taik lalat tu kan so aku tolong hilangkan ke’menyampah’an korang tu dengan tukar rupa bullet yang seiras taik lalat tu kepada icon yang cun melecun . Nak tukar bullet ni ada tiga style . Ikut suka hati jantung limpa hempudu korang la nak ambek yang mana satu .

Macam biasa  Dashboard - Template - Edit Html - Proceed - Tick Expand Widget Template – ctrl + F

Pastu cari kod bawah ni

]]></b:skin>

Kalau dah jumpa tu kopi kod dekat bawah ni pulak paste dekat atas kod yag korang skodeng tadi . Dekat sini ada tiga style so pilih yang mana satu bukan pegi rembat ke tiga-tiga sekali yee . Melampau la tuh .

Style 1

Yang ni simple bullet jew

.post ul {list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(URL ICON UNTUK BULLET) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}

Style 2

Kalau korang nak bullet yang ada effect hover, maksudnya bullet tu bila kita hover atau letak mouse cursor dekat bullet tu tetiba tukar icon yang lain pulak . Dan bullet ni memerlukan dua icon yang berlainan rupa . Contoh macam dekat entry ni korang ternampak ada beberapa ketul bullet kan ? sebab aku pakai style nombor 2 ni . Kalau nak buat rupa macam ni korang just ambek kod dekat bawah ni

.post ul {list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(URL ICON UNTUK BULLET 1) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post ul li:hover {
background: transparent url(URL ICON UNTUK BULLET 2) no-repeat scroll 0px 4px;
}

Style 3
Kalau korang tak nak guna icon pelik-pelik yang aku suggestkan tadi tapi sekadar nak guna bullet yang biasa jew (Circle, disc, square) korang boleh ikut step yang sama seperti kat atas tapi menggunakan code yang lain iaitu code seperti dibawah ni

.post ul {list-style-type: circle; }
.post ul li {
line-height: 1.5em;
color:#289728;
}
.post ul li:hover {
color:#0080ff;
list-style-type: disc; }
.post ul p { color:#555555;
line-height:1.4em; }

Untuk yang ni, korang boleh tukar  list-style-type tu ikut suka korang nak guna circle, disc atau square. warna juga ikut korang nak letak warna apa okey ! Ni jenis ada effect hover .

Haa untuk pengetahuan korang style yg ke-3 ni juga boleh diguna pakai untuk numbering list . Numbering list ni dok sebelah bullet list jew . Code untuk numbering list seperti dibawah ni

.post ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
.post ol li {
line-height: 1.4em;
font: italic 1em Georgia, Times, serif;
color: #289728;
}
.post ol li:hover {
font:bold italic 1em Georgia, Times, serif;
color: #0080ff;
}
.post ol p {
font: normal 1em Arial, Helvetica, sans-serif;
color: #555555;
line-height:1.4em;
}

• kaler korang boleh ambek dekat sini
• warna merah tu letak url icon . Nak icon boleh ambek dekat sini pulak
• warna oren tu letak kod warna yg korang suka
• bullet tu kompem la tade masa korang tengah menaipkan so jangan bikin kalut .

Sebarang pertanyaan tolong tanya dekat aku punya pan page yee . Kalau tanya dekat cbox kew semua box kew aku tak layan . Kalau tak menjadi tu bukan salah aku yee . Samat menjamu selera hahaha ^^

---

Thank you for reading this entry !

---