December 09, 2011

Underline Hover

Photobucket


Hehello.  GG kembali buat tutorial lagi.
Baru jumpa something dan interesting. So, terus nak buat tutorial lah. Haha.
Cuba hover ayat kat bawah ni :

Kan kan ? Kalau kita hover ayat underline di blog, ada kesan bold gitu-gitu. 

1.  Dahboard Design Edit HTML Expand Template Widget 

2.  CTRL + F dan cari code kat bawah ni. 
u {
      atau kalau tak jumpak code kat atas, cari code nie
 /* Header
3.  Copy code ni dan paste di bawah code u { , tapi kalau korang guna code /* Header , paste code ni kat atas code /* Header
u {
text-decoration:underline;
border-bottom: 2px solid #38ACEC;
padding: 0px;
}
u:hover {
text-decoration:none;
background: #2B60DE;
-webkit-transition-duration: 2s;
color: #FFFFFF;
-moz-border-radius: 2px;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
border-radius: 5px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
 ** tulisan yang GG warnakan dan boldkan tue adalah code warna. Tukar ikut warna korang nak di sini.

 4.  Dah siap ? Preview dulu and then SAVE.

0 comments: