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 ♥