Pengertian hover:
Secara sederhana pengertian fungsi hover adalah merubah beberapa variable dalam blog/template ketika cursor berada di atas bagian tersebut. Variabel yang biasanya diterapkan sebagai hover adalah : background (baik background color ataupun background image), border, warna font, jenis font dan tebal font serta fungsi text decoration (pada link). Sumber : http://gubhugreyot.blogspot.comNah yang sekarang kita bahas adalah efek hover pada link, Berikut:
Sebelumnya buka dasbor > rancangan > edit html
Ingat! kode yang kita edit adalah:
a:hover {- Mengubah warna font pada link saat hover
color:$titlecolor;
text-decoration:underline;
}
Lihat kode ini:
a:hover {Lalu ubah kode yang berwarna merah menjadi: color:Kode warna;
color:$titlecolor;
text-decoration:underline;
}
Contoh: color:#999;
Contoh hasilnya bisa anda liat dilink menu diatas blog ini
- Membuat tulisan link menjadi kelap kelip saat hover
Lihat kode ini:
a:hover {Kode yang berwarna merah diganti dengan kode ini: text-decoration:blink;
color:$titlecolor;
text-decoration:underline;
}
Contoh:
- Membuat link menjadi berubah rotate saat hover
Lihat kode ini:
a:hover {Lalu tambahkan kode berikut sebelum tutup kurung (})
color:$titlecolor;
text-decoration:underline;
}
-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg)
Hasilnya dapat dilihat pada blog saya yang pertama >> TOP
Link akan miring saat cursor mouse diarahkan ke link
7deg adalah derajat rotate
Sampai disini dulu sebenarnya masih banyak efek hovernya tapi karena terlalu panjang saya stop sampai disini dulu! semoga berhasil
10 komentar :
makasih ya atas tutornya,
wahhhh kayaknya lebih bagus nihh kalo pake yang satu ini sobb efeknya,,,
salam sahabat
ini hover pada efek yg mana ta???belum paham mumet aku mas
Waah, keren mas... Makasih tipsnya, nanti di pake ah...hehe
aku pernah coba untuk yang blink hanya terlihat di moz di webkit tidak terlihat,
gw coba dulu ah..
main k gubuk ane jg ya
Makasih infonya dan tutorialnya.. nanti bisa saya coba .. makasih sudah berbagi...
udah saya coba kang :)
;)) mantap...
makasih yaa :)
"Semoga sukses slalu"
wah makasih tutonya bermanfaat banget :)
Posting Komentar