TUTORIAL 5 : Header Bergerak Bila di Sentuh.

1. Sign in Blogger > Design > Edit HTML

2. Cari code ini, nak mudah tekan ctrl F je dan pastekan code di bawah dalam kotak find..

 /* Content

korang akan jumpa macam ini :

 /* Content

    ----------------------------------------------- */

3. Letakkan code ini di bawah code yang korang cari tadi, * ini code header  senget bila di sentuh

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

Contoh macam ni :

 /* Content
    ----------------------------------------------- */
#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

4. Faham? preview, if ok sila save dan lihat hasilnya.

TAPI KALAU KORANG TAK JUMPA CODE DI ATAS, BOLEH CARI CODE INI :
*kalau dah jumpa jangan buat cara nih, kang gila pula template korang.padan muka.

/* Header

korang jumpa macam nih : Tempek code merah di bawah code tersebut. Faham?

/* Header
----------------------------------------------- */
#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg); 

Memandangkan banyak jenis gerakan header, so aku senaraikan code nya.

Coding Header Bergerak ke kiri atau kanan

padding-left: 140px;
 -webkit-transition-duration: 1s; }

left boleh tukar right

Coding Header Bergerak Rotote

 -webkit-transition-duration: 1s;
    -moz-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    }

Coding Header Bergerak ke atas dan ke bawah

 padding-bottom: 100px;
    -webkit-transition-duration: 1s;
    }

5. Preview dan menjadi save sahaja. Okey?


Kalau kedua-dua code tu tak ada dalam template korang tandanya this tutorial not suitable for you olls.