Saturday, November 5, 2011

Tutorial : Header bergerak bila disentuh oleh sang cursor.

hye korunk. today aku nak full kan request tutorial "stranger here" ni . buat "stranger here", so soryy, sebab lambat ngat buat tuto nih, ekceli i baru habis final je pun. heh . oke straight to the point, aku share kan camne nak buat header tu bergerak ke tepi , tapi fyi lah kan , aku guna template washed denim , dan ianya menjadi untuk buat header ni bergerak . utk template lain I not sure bout it. but tak salah if korunk nak cuba okay :) oke pendahuluan yang membuang masa, just straight to the point okeh ♥ 

1. Design --> edit HTML

2. jangan lupa untuk download full template ogeyh , as backup, nanti kalau koding korang TER-rosak ke, takdelah korang gelabah bewak , nanges2 blog rosak. hehe. but no worries lah, takkan rosak punyer kalau korang ikot step ogeyh . but , sediakan payung sebelum hujan kan ? :)

3. ctrl+F to find this code :

/* Header
----------------------------------------------- */

4. dah jumpak ? then korang paste kan kod ni bawah kod tadi tu okeh ?

#header:hover {
padding-right: 50px;
-webkit-transition-duration: 0.5s;

TAKENOTE: right tu boleh change dengan left / top / bottom okeh ? and 50px tu pun change ikutsukahatikorangnakberapa .

eh, ni contoh kod aku :

5. cer try preview, tak bergerakkan ? heh, kalau time preview tu bergerak kira advanced lah sebab aku preview dia tak gerak, then bila save baru dia bergerak :D so dah siap. Gud Luck!

UPDATE!!

kalau anda nak bagi header and berpusing-pusing pon boleh . the step is same like above   but just change the coding okay ? this is the coding :
#header:hover {
-webkit-transition-duration: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);

and forsure you can change the duration .

okay bye =)

LOVE ; ♥ misluvcoklat ♥

5 comments:

FYA PELANG! said...

tak menjadi jugakk :(

misluvcoklat said...

sys pakai template apa ? myb utk washed denim je kot yg mnjd :)

Hana Lolo said...

sis, tlg reply dkt shoutmix adek boleh? http://hanachubbie.blogspot.com/ ------>> adek guna blogskin, tk tk boleh pun :(

Ain Intel said...

yeay!kiter punyer menjadi! kita buat bottom... tenkiu banyak2 sis!

Amir Rusyaidi said...

Menjadi ar..thx for the tuto..hehe