Header Hover

Assalamualaikum,

Sowie kepada readers kerana atie da lame tak buat tutorial.

Arini atie nak buat tutorial 'Header Hover'.

Ape tu? Ok. Cube korang alihkan cursor korang ke header atie.

Nampak kan die bergerak tuh? HEHE

yang tuh la.

1. Dashboard -> Design -> Edit HTML -> Tick Expand Widget Templates.

2. Tekan CTRL+F, cari code

#header {

3. Highlight dan tekan CTRL+C, copy code kat bawah nie

#header:hover{
padding-left: 100px;
-webkit-transition-duration: 3.4s;
}

4. Paste dekat ATAS code yang korang cari tadi.

5. Preview dan Save.


*Code yang korang copy tuh, kalau nak header hover macam atie.
*Banyak jenis header hover, amek nie :


Header bergerak ke kanan

#header:hover{
padding-right: 100px;
-webkit-transition-duration: 3.4s;
}

*atie punya bergerak ke kiri.


Header bergerak secara rotate

#header:hover{
-webkit-transition-duration: 1s;
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);

Header bergerak ke atas dan ke bawah.

#header:hover{
padding-bottom: 100px;
-webkit-transition-duration: 1s;

*Kalau tak paham. Sila sertakan di kotak komen. Selamat Mencuba.

---

Selamat Mencuba dan Terima Kasih Sudi Men-Follow Tutorial yang tidak seberapa.
Sedekahkan satu 'LIKE' Ya.

---