Wednesday, August 29, 2012

Tutorial : Link Hover Ber-Rainbow

Tumblr_m93i0l2tqc1retnaho1_1280_large
Hye vip . sihat? haha . Ok tadi ada orang tanya macam mana link atin ni bile hover kat link , ade rainbow? . Wow , suka kan korang bila nampak benda baru haha . Ok sebabkan ada yang tak tahu , meh atin sharekan kat korang ye . Rasanya ni hover new style right? hihi >< ..


Example :

Blogskin

 Dashboard > Template
 Press Ctrl + f serentak dan cari code a:hover{
 Copy code kat bawah ni
-webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image:-webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}

 Paste di bawah code tadi
 Preview & save


..................................................................................................................................................................


Design

 Dashboard > design > edit html > tick expand widget
 Press Ctrl + f serentak dan cari code ]]></b:skin>
 Copy code kat bawah ni
a:hover{
-webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image:-webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}

 Paste di bawah code tadi
 Preview & save









.

No comments: