Tutorial 118 : Header Bergerak Bila di Sentuh.

Assalamualaikum semua.
Waktu free ni aku nak share tutorial untuk my reader. Rindukan dengan tutorial aku? Ok sekarang kita bertemu dalam segmen tutorial bersama Cik Nurfarah.
Kali ini aku nak ajar korang macam mana nak buat effect terkejutkan reader korang iaitu header menjadi senget apabila di sentuh? Mahuuu? sila angguk kepala lutut ramai-ramai.

Maaflah, aku tak buat real contoh untuk korang tapi aku dah try buat experiment sendirian berhad dan menjadi! Aku bagi gambar contoh je la ye. Hope korang semua faham..yang copy cat je tak faham bahasa kan?

Header senget takhala cursor menyentuh..

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.

p/s : Agak kepeningan mencipta ayat selepas lama tidak menulis tutorial. Hope korang faham ye!

bai!

SHARE:

blog tutorial