Saturday, November 5, 2011

Tutorial | Hover header ke tepi


Salam (^_~)

Macam dah lama tak buat tutor kan? *eleh, baru dua tiga hari kut*. Okeh harini aku nak tunjuk macam mana nak bagi header bergerak ke tepi kiri atau kanan bila cursor menyentuh header. Wah! kelas giteww, boleh bergerak bagai. Maybe dah ramai yang tau dan mencuba tutor neh, tapi sasape yang masih tak tau dan nak try buat. Jom! 

1. Dashboard | Design | Edit HTML | tick expand widget templates

2. Tekan ctrl-F (serentak) atau f3, cari kod di bawah neh
.Header h1 {
3. Copy kod di bawah neh dan paste di atas kod yang kamu cari tadi
.header:hover {
padding-left: 50px;
-webkit-transition-duration: 1s;
}
left - pergerakan header. boleh tukar ke kanan/right
> -webkit-transition-duration: 1s tukalo kamu nak lambatkan pergerakkan boleh tukar ke 10s, tengok apa jadi. heheheh =)

4. Kalo kamu tak jumpa kod tuh, try cari yang neh pulak
/* Header
untuk kod neh kamu akan jumpa macam neh
/* Header
----------------------------------------------- */
di bawah kod ni, akan ada kod yang ada tulis h1, asalkan ada h1 betul la tu. Contohnya
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 2px 2px rgba(0, 0, 0, .1);
}
Ok, kamu copy yang sama di atas kod yang kamu jumpa tu.

5. Preview, kalo takde error baru Save.

Photobucket

Thanks for your reading love! =D

0 00 orang duk bersembang:

Related Posts Plugin for WordPress, Blogger...