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]:

Shing Blabla 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

♥ Anis said...

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

Miss Yanaa said...

kalau utk achieve mcm mne plak?