Tutorial : Header Hover Bergerak Ke Tepi Part 2 (Template Designer)


Assalamualaikum

Tutorial hari ni pasal header hover. Saye dah pernah buat tuto header hover bergerak ke tepi sebelum ni. Tapi yang ni, header die bergerak ke tepi and then masuk semula dengan smooth. Let's find out how.

1. Dashboard > Design > Edit Html

2. Ctrl+F, cari code kat bawah ni.
/* Header
Full coding die macam ni.
Code 1 :
/* Header
----------------------------------------------- */
3. Copy code kat bawah ni, then paste bawah code 1 tadi.
.header {
width: 780px;
-webkit-transition-duration: 3s;
margin: 0 auto;
background-color: transparent;
color: transparent;
padding-left: 8px;
}
.header:hover{
padding-left: 80px;
-webkit-transition-duration: 3s;
}
Padding-left : boleh tukar right, top, or bottom.
3s : duration header tu bergerak ke tepi and masuk balik.

4. Save.

Cik Tyrah

Comments

afira zakuan said…
thanks for tuto! tapi saya ade edit kod untuk die bergerak ketepi then hilang and masok balik dengan smooth :) heheh :P
fyzafyshie93 said…
thanx, suka tuto nie, best la semua tuto awk :) keep it up ^^
Yay ! Thanks ! Sangat berguna ! ;D
//Reflection said…
thanks ciktyrah >,< dah lame cri tuto ni :))
azyan hamimi said…
yey..jadi pon...thanks
yaya c domo said…
yes!! da jadi!! huhu... thanks a lot for your tuto!!
kinnyKin said…
Hi! urm boleh tak kalau i nak copy tuto you? nanti i credit you , boleh ?
Cik Tyrah said…
@kinnyKin

Be my pleasure, but make sure credit okay ;)
sgt4 berguna thx a lot. btw, nk tanye camana nk credit and credit tu ape?? sry sy kecik lgi bru umur 11 thun blog xbrape cntek tpi boleh tahan la haha (perasan la plak budak kecik ni) tolong sy
Ainina said…
suke2.. jADI la. I'll follow u..