Thursday, August 4, 2011

Bagaimana Nak Buat Header Animasi GIF Blog

Korang semua nak tak buat header blog yang ader animasi? Contoh yang terbaik macam header Cik Epal dan Faiz Tapit ni. Cool kan bila boleh buat header macam tu. Silap boleh lip-lap dan gerak-gerak lagi tuh XD Actually ni adalah request dari Miss Sara Cullen kita^^ So untuk post ni Mr.Ben akan cuba ajar cara nak buat header GIF korang sendiri :D

Firstly untuk buat header GIF korang sendiri korang perlukan sediakan bahan-bahan seperti berikut... Macam nak masak la pulak aku ni -.-"

Software Photoscape (Bagi yang takder boleh download kat sini)

Beberapa pic yang mempunyai saiz yang sama ( Aku recomend kan korang posing maut buat muka paling menggoda korang kat pic tu :P Sila edit se-creative yang boleh)

Account website image hosting (Aku recommend korang guna Photobucket, nak guna pun mudah, free pun free)

Ok tu je kot bahan yang korang perlukan, kita masuk ke langkah-langkah penyediaan pulak.. ok seriously bunyi macam chef wan tengah host cooking show -.-"

Firstly korang bukak photoscape dan click dekat Animated GIF

Lepas korang pilih dalam tiga atau empat pic pilihan korang, sebagai contoh ni empat pic pilihan hati suci nurani Mr.Ben ( Bila nak suci aku nih -.-" Tak per niat dan usaha tu yang penting)
Pic 1
 
Pic 2

Pic 3

Pic 4

Semua gambar muka Mr.Ben yg poyo -.-"
Tolong pastikan saiz gambar-gambar korang tu semuanya sama yer. Kalau nak mudah korang guna je satu gambar yang sama, cuma korang edit bagi lain setiap gambar tu. Kalau nak guna gambar yang lain-lain pun boleh tapi pastikan betul-betul sama saiz dia dalam lebarXtinggi. Korang notice kan setiap ayat kat gambar Mr.Ben ni lain kan? Tu la yg akan menjadikan animasi korang nanti.

Skrang korang drag pic-pic korang ni ke photoscape mengikut susunan yang korang nak. Bila Mr.Ben kata mengikut susunan ni maksud Mr.Ben pic mana yang korang nak keluar dulu dalam animasi korang tu yang tu korang drag dulu.

Ok skrang korang notice tak kat sebelah kanan tu ader satu button yg nama change time? Tu button yang akan menentukan betapa cepatnya gambar korang bertukar dalam animasi tu nanti, korang edit dan tentukanlah timing gambar korang secukup rasa dengan button tu yer... ok seriously -.-" asal Mr.Ben dok bunyi macam nak masak ni, Haish~ makan lapo lak aku pose-pose ni dok sebut pasal masak nih.

Dan kalau korang perasan ada banyak lagi button kat situ macam change effect dan sebagainya. Ngan button-button tu korang boleh tambah effect dan buat macam-macam lagi. Korang boleh experiment ngan button-button tu kalau nak bagi header korang menarik lagi. Bila korang dah puas hati korang boleh lah save header korang. Dan korang dapat lah hasil seperti header di bawah :D

Yeah! Skrang korang dah ader header GIF korang sendiri! Tapi sabar dulu, korang tak boleh main upload je file GIF macam korang upload gambar biasa buat banner. Sebab blogger akan buat image korang jadi static kalau korang buat macam tu. Sia-sia la nanti korang buat penat-penat tapi header korang tak gerak atau apa pun. Untuk overcome masalah ni korang kena upload header korang ke Image hosting website macam photobucket dulu. Website macam photobucket ni akan bagi satu link yang dipanggil direct link untuk memudah user dia orang letak pic kat mana blog atau website dia orang. Sila copy direct link gambar korang tu.


Ok, next step maybe ramai biasa buat kot. Dekat blogger korang pergi dekat Design>Page Elements dan bukak kat tempat yang korang biasanya upload header korang tu. 


Bila korang dah save sila view blog korang. Siap dan sedia untuk dihidang XD

Sebagai Tips tambahan aku ajar akan korang macam mana nak buat header korang jadi center atau kat tengah elok-elok dalam blog korang tu.

Korang ikut je step ni ok

pergi ke Dashboard > Design > Edit HMTL

tekan ctrl+F pastu search 
/* Content

copy code bawah ni and pastekan kat atas code  /* Content
.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Dah siap! Korang check blog ni ok kalau tak faham lagi pasal center kan header ni :D


Ok the till next post then XD

Peace be upon you..

Happy Ramadhan!

Correction - Mr.Ben terima teguran dari  cik sha my heart  yang Mr.Ben dah tertukar term banner dengan header, so Mr.Ben dah baiki dah ^^ Terima kasih sebab tegur, banyak lagi Mr.Ben kena belajar nih :D 

11 people got something to say:

Sara Shaari said...

wah ! tutorial special for aku lah. ehehehhe..owh gitu..aku twu yg buat kelip2 tu..cuma tak tahu cmane nak upload kat blog..upload je, gambar tak gerak..ha..skunk dh twu..hehehhe thanx ! XD

Mieza Everdeen said...

nice one ben ! rasa nk buat lak sbb mcm senang jer.. hehe

Budak Malas Sikat Rambut said...

ohhh , baru tauuu

shamyheart said...

confious.. banner ke header ni? mcm header tapi kelip2 mcm banner.. kalau banner, kenapa nak kena letak bagi center plak?

Ben Frankenstein said...

Haha.. terima kasih sebab tegur saya, saya baru lagi bab blogging ni, beza banner dan header pun susah saya nak kenal, dan lepas tanya member2 saya yang lagi lama blog dia org kata ni header.. betul la kata awak, kalau ader aper2 info pasal ni awk share lah ngan saya ok ^^ nanti saya baiki, pic tu memang kena bagi center, sebab kalau x dia jd x cantik mana dok senget belah kiri je^^

shamyheart said...

Ben: sama2. ingtkan betul2 banner, tapi keliru sebab kata letak kat tengah, dah fikir mesti ben salah term ni. Haha~

Tahu memang kena letak kat tengah..

Kalau pape update la lagi pasal tutorial ni tapi pastikan gunakan term yg betul dan terangkan apakah maksudnya term tu, k.

p/s: patutlah traffik mencanak. letakkan link dalam entri rupanya. TQ2..

Ben Frankenstein said...

@sha my heart Welcome :D

Yana Haudy said...

Terima kasih! this is so helpful. Lama cari tahu cara ubah header jd animasi, akhirnya I found the way from you! Salam kenal dr Jakarta :)

Ben Frankenstein said...

@Yana @MaYCraft Jakarta? really? wow.. sama2 :)

Nur Fatanah Marzukay said...

Macam mana pulak kalau nak cari image hosting website pulak...x de image hosting laaa...cam na nak cari...???

Ben Frankenstein said...

image hosting website ada banyak.. tapi saya guna photobucket.com sebab free :)

Disclaimer

Any pictures, videos and graphic forms, are not copyrighted as the date taken from the search engines. As if its copyrighted, all credit goes to the owner and I did not own the copyrights. All of the graphic forms are linked with the original source. All of those pictures, videos and graphic forms are not for any commercial use, I gain nothing for those forms of files.
Related Posts Plugin for WordPress, Blogger...