Thursday, October 27, 2011

Tutorial: Hover Link | Background



Salam semua!!

Jom masuk kelas tutor. Kali ni cekgu nak ajar buat hover link ada background. Macam mana? Cer alihkan cursor kamu dekat link kat bawah neh, tekan ctrl dan klik.

Kamu comel!

Haaa..selingan menggoda jeh tuh. Ok, bagi perhatian ye murid-murid. Kelas dah nak mula.

1. Dashboard > Design > Edit HTML > tick expand widget

2. Tekan ctrl-F (serentak) dan cari kod neh

a:hover {

3. Then copy kod di bawah ni dan paste di bawah kod yang kamu cari tadi.

border-top: 2px solid #000000;
border-bottom: 2px solid #000000;border-radius:3px;
background: #FFFFFF;-webkit-transition-duration: 2s;
4. Now, kene tukar

2px: ketebalan border | kalo nak tebal lagi tambah nilai px tu.
#000000: warna border cari di SINI
3px: kelengkungan border | kalo nak lebih lengkung tambah nilai px tu. cer tukar jd 10 tengok apa jadi. haaa..
#FFFFFF: warna background
2s: duration nak menjadi background | tambah nilai kalo kamu suka menunggu lama. heee
solid: boleh tukar dashed, dotted. kalo tak nak ada border, delete it.

5. Dah tukar semua, PREVIEW dulu, takde error baru SAVE.

6. Okee..itu je..
Adios!

Photobucket

Thanks for your reading love! =D

0 00 orang duk bersembang:

Related Posts Plugin for WordPress, Blogger...