Sunday, October 23, 2011

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!
Kalau suka LIKE sahaja, Jangan lupa komen. TQ.

38 88 Orang doakan Farah dapat 4 flat:

cerita best said...

NICE BLOG....pakjoe nk bg tau nie pakjoe ada byk lg tip blog yg nk bg kt tuan blog jemput siggah ke laman blpg pakjoe jgn lpa tau sbb pakjoe dh follow

budak demOk ! said...

tengss tuto .. dah lame nak tau *jeles tGok org punyee . hehe

FiqaSaleh said...

best..tp blog kite lom ada header lagi..Y_Y

♥Cik Nurfarah♥ said...

@ to all

Selamat mencuba semua.

katakataDILA said...

sedih tak dapat buat tutorial nih..

sabry oppa said...

kenape saye letak tutorial ni.. blog saye ilang background, semua berubah... omg!!!!!!!!!!! takot saye akak.. maybe blog saye poblem kot...

♥Cik Nurfarah♥ said...

@sabry oppa

la ye ker?? humm mybe tak ssuai kot..ada buat back-up?

razanul dayana said...

thanks akak , :)

Beginning The Story said...

tak menjadi -.-

Aiman Haqimief3 said...

HElo... Macam mana nak tukar header yew ??? sbb dah lupa kat mne tmpat setting dia.. :D

Pinky Aina said...

tenks dear jadikk

miss domo syahmi :) said...

kenapa x jadi ne sis ?

syakiraikira said...

Salam . Kak farah nape tak jadi ? sya ada 2-2 code tuu tapi bila preview , dia jadi error . Tolong yea kak :)

Pinky Aina said...

sama ngn sy

Nur Julia said...

mcm mne nk buad header ?

Noor Aimi Fatihah Bt. Norlizan said...

np tk jd pon? >.<

Najwa Husna Binti Mohd Hanafi said...

akak minta tolong macam mana kalau nak buat header ad border erk?? heee :D

nadiah said...

akak mcm mne nak buat cbox..

Aznana said...

emmm farah kenape sy buat background jadi hilang???? dua2 code tu ad sy jmpe tp bile ltak asyik ilang j background dua2 da cube same j.. tp gmbar tu jd grak nye..

Aznana said...

@Aznana jadik tq.... :)

♥♥♥CikHarty♥♥♥ said...

slm...soe erk...sy nk wat header tu gerak2 tp pelik pulak yg jadik....hope cik farah dpt tolong sy k..tak taw mslh pe ni dr yg mane 1....huhuhuh jemput ke blog http://cikharty.blogspot.com/

hanny farihah said...

bile da letak tu blog jd len mcm je ..sgala mnde yg da ade ilang termasuk dgn background skali ..tulisan puen da jd len ..

Cik Eyra here said...

Tak menjadi ponnnnn ;(

myownlife said...

tolong buadkann blog bole , nanti topupkn

Cream Melting ✿ said...

Akak tak boleh la . bile buat , try bkk blog semue jadi code

SonIQbaALe aiEYn said...

code sye,,,asyk x dpt jee..akk tolong gi thu code dye ape...please..sbb susah lah sye nak cari code dyee

SonIQbaALe aiEYn said...

@syakiraikira
code dye ape? ble saya nak thu ape code dye?

SonIQbaALe aiEYn said...

@Aznana
akk, code dye ape? bleh saya tahu =)

Izreen said...

tak boleh pun.... dia kata More than one widget was found with id: HTML7. Widget IDs should be unique.
=(

Izreen said...

tak boleh pun.... dia kata More than one widget was found with id: HTML7. Widget IDs should be unique.
=(

AdNi NaBiLa said...

Cantik Blog..btw tq,,

Afiqah Arif said...

nak buat tapi blog pakai HTML. tak jumpa /* Content tu :(

Husna Humairah said...

tau tak? saya seram ah bila header bergerak. haha! tak buat :p

Cinta Kechik said...

tengs...menjadik pun, lama da tercari-2 tut0 mcm ne, akirnyaa jmpa jgak.. :)

Azyan Ramle said...

wahh,,jmpe pown tuto header ni..tanx dear..kte gne yea ^_^

julia said...

awak,perasan x.blog dah lain laa.camne ye?

Dilah Nadzir said...

http://VisitsToMoney.com/index.php?refId=317077

Cik Puan Matz said...

boleh tolong editkan blog untuk saya tak....dah buat still xjd...

 
This Blog is Protected. Copyright 2011 © Design By Cik Nurfarah