Jumat, 03 September 2010

Mempercantik efek hover pada link

| Jumat, 03 September 2010 | 10 komentar
Selamat membaca artikel diblog ini semoga bermanfaat :)

Bismillah Pictures, Images and Photos

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.com
Nah yang sekarang kita bahas adalah efek hover pada link, Berikut:
Sebelumnya buka dasbor > rancangan > edit html
Ingat! kode yang kita edit adalah:
a:hover {
color:$titlecolor;
text-decoration:underline;
}
- Mengubah warna font pada link saat hover
Lihat kode ini:
a:hover {
color:$titlecolor;
text-decoration:underline;
}
Lalu ubah kode yang berwarna merah menjadi: color:Kode warna;
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 {
color:$titlecolor;
text-decoration:underline;
}
Kode yang berwarna merah diganti dengan kode ini: text-decoration:blink;
Contoh: tes

- Membuat link menjadi berubah rotate saat hover
Lihat kode ini:
a:hover {
color:$titlecolor;
text-decoration:underline;
}
Lalu tambahkan kode berikut sebelum tutup kurung (})
-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 :

Islamic.Net mengatakan...

makasih ya atas tutornya,

Download Software Terbaru mengatakan...

wahhhh kayaknya lebih bagus nihh kalo pake yang satu ini sobb efeknya,,,

Unknown mengatakan...

salam sahabat
ini hover pada efek yg mana ta???belum paham mumet aku mas

Herlan mengatakan...

Waah, keren mas... Makasih tipsnya, nanti di pake ah...hehe

Amdhas mengatakan...

aku pernah coba untuk yang blink hanya terlihat di moz di webkit tidak terlihat,

2x45 Menit mengatakan...

gw coba dulu ah..

main k gubuk ane jg ya

Sodikin Kurniawan mengatakan...

Makasih infonya dan tutorialnya.. nanti bisa saya coba .. makasih sudah berbagi...

secangkir teh dan sekerat roti mengatakan...

udah saya coba kang :)

ENDA mengatakan...

;)) mantap...

makasih yaa :)

"Semoga sukses slalu"

felisitas mengatakan...

wah makasih tutonya bermanfaat banget :)

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Blogroll

Flagcounter

free counters
© Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online