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!

39 comments

  1. 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

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

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

    ReplyDelete
  4. sedih tak dapat buat tutorial nih..

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

    ReplyDelete
  6. @sabry oppa

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

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

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

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

    ReplyDelete
  10. 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..

    ReplyDelete
  11. 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/

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

    ReplyDelete
  13. tolong buadkann blog bole , nanti topupkn

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  25. kenapa tak jadi

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH