|
Tutorial : Hover Link With Image .
Assalamualaikum and Annyeong. Dah lama tak buat tuto. Saya busy. Hari itu saya baru habis edit blog saya. Hahaha. Sekarang saya dah puas hati dengan blog saya. Back to the title. Tuto ini di request oleh Jeanny dan Lee Za Ra. Dia tanya macam mana nak buat link hover macam saya. Okey jom saya ajar.
1. Dashboard > Template > Edit Html
2. Tekan Ctrl+f serentak dancari code a:link
3. Copy code dekat bawah ni.
a:link, a:visited {
font-family:Short Stack;
padding: 2px;
text-decoration:none ;
color:#CECEF6 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ;
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UND-lJ4bmzoPF4rUWUyfblzAJO__THpOoFKAtsl11T1sDkRpt1Qe6TW2JmChHLXIkNZUcRkfNnp4sEMuyNQzpBezZOA5As-if1OvlatFWjIA_-w8gHzI_bjbruYJ9WsEs0wwBYWHc4E/s1600/CURSO.png), progress;
}
a:hover {
color:#CECEF6 ;
background:url(Image URL);
background-position:50% 80%;
background-size:400px;
border-radius: 3px;
}
4. Korang ganti code dekat bawah link korang tu, dengan code atas ni .
5. Preview and save
Biru : Code Warna . Code warna, boleh dapatkan di SINI.
Merah : Korang boleh carik lah gambar yang korang suka.
PAST • FUTURE
|
Tutorial : Hover Link With Image .
Assalamualaikum and Annyeong. Dah lama tak buat tuto. Saya busy. Hari itu saya baru habis edit blog saya. Hahaha. Sekarang saya dah puas hati dengan blog saya. Back to the title. Tuto ini di request oleh Jeanny dan Lee Za Ra. Dia tanya macam mana nak buat link hover macam saya. Okey jom saya ajar.
1. Dashboard > Template > Edit Html
2. Tekan Ctrl+f serentak dancari code a:link
3. Copy code dekat bawah ni.
a:link, a:visited {
font-family:Short Stack;
padding: 2px;
text-decoration:none ;
color:#CECEF6 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ;
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UND-lJ4bmzoPF4rUWUyfblzAJO__THpOoFKAtsl11T1sDkRpt1Qe6TW2JmChHLXIkNZUcRkfNnp4sEMuyNQzpBezZOA5As-if1OvlatFWjIA_-w8gHzI_bjbruYJ9WsEs0wwBYWHc4E/s1600/CURSO.png), progress;
}
a:hover {
color:#CECEF6 ;
background:url(Image URL);
background-position:50% 80%;
background-size:400px;
border-radius: 3px;
}
4. Korang ganti code dekat bawah link korang tu, dengan code atas ni .
5. Preview and save
Biru : Code Warna . Code warna, boleh dapatkan di SINI.
Merah : Korang boleh carik lah gambar yang korang suka.
PAST • FUTURE
|
thanks akk :)
@zaa tyra: Yeol Welcome. :D
Post a Comment