D.I.Y Special Bullet List
Korang teringin tak nak letak bullet list yang boleh tukar tukar bila gerakkan mouse kat dia cam aku punya ni,senang je kalau nak buat.Kali ni aku akan menerangkan dengan sangat jelas sebab benda alah ni pun memang senang je kalau nak buat tak caya cubala,kalau takut apa apa jadi,backup template anda dengan log in ke dashboard->design->edit html, dan download full template.Ok,dah,mari kita mulakan pembelajaran kita,dah lama tak menulis tutorial ni.
Oops lupa plak,sebelum korang mula,mesti kasi korang tengok apa yang bakal korang buat,ni dia,bullet list yang cantik.
Tugas korang senang je,gi kat design->edit html,lepas tu tekan Ctrl F,nanti dia keluar find,cari kod ni:
Ok,pastu kat atas kod tu,korang copy and paste je kod yang biru ni:
.post ul {list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MefGz6veeemax1bEcc1l5346yjPf9u7XOrh_gNLQQXfn2kboOh7r3e7vMwLYJXSrGD1r-QcIuqdbvbyOFmNOEBtpoKaOnWySDWq_eTXP2naKf4zGVWt8qoSK0bM_bFzg5cn4YXubFtY/s400/265.gif) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post ul li:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBUu09RSMKC_KmYjcvMY5oCklv_5FdNACjUCBwsG100yHizQedYnnJ31q_aiUM6IcyZNPYOFao_79ULLm61zfkSSmk2Vs7CPsj2OY-g3R7GRWUXqJrutAa8Z6cRbh1p2yutaHsCvgUW68/s400/261.gif) no-repeat scroll 0px 4px;
}
Save template.DAH SIAP!!Cuba test tulis sebuah pos,dan gi kat compose,buat bullet list anda untuk melihat hasilnya.
Oops lupa plak,sebelum korang mula,mesti kasi korang tengok apa yang bakal korang buat,ni dia,bullet list yang cantik.
- Follow me
- Nuff me
- Comment me
Tugas korang senang je,gi kat design->edit html,lepas tu tekan Ctrl F,nanti dia keluar find,cari kod ni:
Ok,pastu kat atas kod tu,korang copy and paste je kod yang biru ni:
.post ul {list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MefGz6veeemax1bEcc1l5346yjPf9u7XOrh_gNLQQXfn2kboOh7r3e7vMwLYJXSrGD1r-QcIuqdbvbyOFmNOEBtpoKaOnWySDWq_eTXP2naKf4zGVWt8qoSK0bM_bFzg5cn4YXubFtY/s400/265.gif) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post ul li:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBUu09RSMKC_KmYjcvMY5oCklv_5FdNACjUCBwsG100yHizQedYnnJ31q_aiUM6IcyZNPYOFao_79ULLm61zfkSSmk2Vs7CPsj2OY-g3R7GRWUXqJrutAa8Z6cRbh1p2yutaHsCvgUW68/s400/261.gif) no-repeat scroll 0px 4px;
}
Save template.DAH SIAP!!Cuba test tulis sebuah pos,dan gi kat compose,buat bullet list anda untuk melihat hasilnya.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.