Tutorial : List With Special Hover


Assalamualaikum and annyeonghaseyo. Sorry dah lama tak update. Btw tutor ni direquest oleh Anis. Dia tanya mcm mana nak buat hover pada icon. Tutor ni hanya untuk pengguna template designer sahaja. For blogskin, tieqa akan update kemudian.


1. Copy code di bawah ni
<style>
a.baeky{
background:url(URLICON);
background-repeat:no-repeat;
background-size:15px;
padding-left:20px;
color:#000;
margin-bottom:2px;
font:11px verdana;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
color:#000;
display:block;
}
a.baeky:hover{
background:url(URLICON);
background-repeat:no-repeat;
background-size:14px;
}
</style>
<a class="baeky" href="LINK" >AYAT</a><br>
<a class="baeky" href="LINK" >AYAT</a><br>
<a class="baeky" href="LINK" >AYAT</a><br>
<a class="baeky" href="LINK" >AYAT</a><br>
2. Paste dekat mana-mana korang nak
3. Save

Pink : URL icon sebelum hover
Biru : URL icon selepas hover
Oren : ayat korang
Hijau : link

4 comment [s]:

aimanhanis. said...

salam kak tiqa . ni nak letak kat mana eh ? yang kod tuh ? kat edit html ke ? maaf ye :)

Aimi Wardina ♥ said...

http://hadifahsabri.blogspot.com/2012/11/partner-end-year-giveaway-by-hadifah.html

Student Kecik said...

thank you very much, Kak Tiqa! ^^ Sy try sekarang.

YanaMuhd said...

kalau utk achieve mcm mne plak?