Membuat Header Banner
March 4th, 2010 | 4:20 pm | Tutorial | 41 responses
Salam, kali ni saya membuat tutorial untuk menjawab pertanyaan rakan bagaimana membuat banner seperti di blog kulanzsalleh.com ni. Untuk makluman, setiap template mempunyai bentuk dan skrip yang berbeza, jadi saya akan terangkan berdasarkan template yang saya gunakan ni. Walau bagaimanapun, anda mungkin boleh ikuti langkah ini dan sesuaikannya dengan template blog anda.
Satu perkara lagi yang perlu anda tahu, saya menggunakan blog WordPress selfhosting. Namun tidak bermakna pengguna blogspot tidak boleh mengikuti panduan ini. Anda juga masih boleh mengikuti cara berikut. Hanya langkah-langkahnya sahaja yang agak berbeza.
Langkah #1
1. Saya edit gambar menggunakan Photoshop dan saya simpan dalam bentuk transparent (format *.png). Gambar yang terhasil adalah seperti berikut:
Imej 1
2. Setelah itu saya create satu bentuk menggunakan Rounded Rectangle Tool seperti gambar di bawah (berwarna putih) untuk dijadikan latar belakang bahagian atas template. Saiz lebar bentuk ini adalah mengikut saiz container template blog saya. Kemudian saya letakkan gambar yang saya buat sebelum itu (Langkah 1) di atasnya mengikut kesukaan saya sendiri. Lepas itu saya simpan gabungan dua gambar tadi dengan nama top.png. (Gambar sebenar adalah dalam bentuk transparent tetapi sengaja saya gunakan latar berwarna ungu supaya warna putih jelas kelihatan)
Imej 2
(Dimensi asal imej adalah = height: 190px, width: 820px)
Langkah #2
1. Saya upload gambar tadi di hosting.
Langkah #3
1. Login di dashboard, dan klik menu Editor di bawah Appearance
2. Setelah page Edit Themes dipaparkan, lihat pada fail Stylesheet (stylesheet.css)
3. Skrip yang saya cari adalah seperti berikut:
Imej 3
4. Setelah itu saya gantikan (image/top.png) dengan URL di mana terletaknya imej yang telah di-upload. Contohnya (http://kulanzsalleh.com/blog/imej/top.png). Peringatan: Buat backup skrip stylesheet.css sebelum membuat sebarang perubahan pada skrip!
5. Kemudian saya ubah (height: 120px) tu kepada (height: 190px) mengikut dimensi asal imej top.png tadi (rujuk Imej 2 di atas).
6. Simpan (update) fail stylesheet.css berkenaan dan siap.
Beberapa perkara penting yang perlu diberi perhatian:
1. Sesetengah template menggunakan imej sebagai background untuk container-nya (imej itu merangkumi bahagian atas-top, kandungan-content atau body, dan bahagian bawah-bottom), manakala sesetengahnya hanya menggunakan warna sebagai latar container.
2. Bagaimana mengenal pasti sama ada sesebuah template yang menggunakan imej ataupun warna sahaja? Cuba lihat semula Imej 3 di atas. Perhatikan pada #top dan #header tu. Ringkasnya saya nyatakan #Top menggunakan imej sebagai background manakala #header pula hanya menggunakan warna.
3. Bagi template yang tidak menggunakan imej sebagai background, anda boleh meletakkan banner tadi di bahagian header. Untuk melakukannya, pastikan anda telah meng-upload imej anda di hosting (Langkah #2). Kemudian ikuti Langkah #3, cari skrip #header.
4. Setelah itu anda letakkan URL di mana imej header tadi anda simpan di dalam ruangan ( ). Simpan fail stylesheet.css dan lihat paparan blog anda. Jika paparannya sempurna, tahniah! Tetapi jika sebahagian daripada imej tidak kelihatan. Seperti Imej 4 di bawah, sila adjust height header template sesuai dengan saiz tinggi banner anda (seperti pada Langkah #3, No.5).
5. Bagaimana jika anda jumpa dengan skrip #Header, tetapi tidak tertulis seperti: background: #aaffcc url ( ) no-repeat; seperti di atas. Jangan risau, anda hanya perlu tambah skrip berkenaan di fail stylesheet.css tu.
Sekadar Perkongsian: Inilah design asal template blog ni sebelum diubahsuai.
p/s: Harap maaf, tak pandai sangat susun ayat untuk buat tutorial. Lebih 3 jam saya siapkan penulisan ni.. hehe
said on March 4th, 2010 at 4:27 pm
Tergerak gak bro nak wat header banner ni,tapi belum design lagi cmner ,ehehe ,ape-ape pun terima kasih untuk tutorial ni
wazy´s last blog ..Adobe Photoshop CS3 & CS4 Portable
said on March 4th, 2010 at 9:23 pm
Tak apa bro wazy, pelan-pelan design banner, pastu baru dapat buat
said on March 4th, 2010 at 4:49 pm
Memang best tutorial ni bro.. Ichi nnti nak buat gak la, dah rancang dulu2 nak wat tp xberkesempatan sebab tgh design website joomla tuk kampeni. later la try ^_^
Ichigo´s last blog ..Maintenance Mode Plugin WordPress
said on March 4th, 2010 at 9:26 pm
wah, ada projek web lain rupanya bro.. patutpun jarang dah blogwalking.. apapun lepas siap web kompeni nanti, bolehlah buat projek utk blog pula..
kulanz´s last blog ..Membuat Header Banner
said on March 4th, 2010 at 6:10 pm
Aku bab bab nak design ni memang kurang sikit. apa-apa pun terima kasih lar sebab berkongsi tutorial ni dengan kitorang semua.
Stargone´s last blog ..Kadar Cas Baru Hotlink Youth Club
said on March 4th, 2010 at 9:26 pm
u’r welcome..
sayapun tak pandai sangat bab-bab design ni.. tapi kalau asas tu kira bolehlah..
kulanz´s last blog ..Membuat Header Banner
said on March 4th, 2010 at 7:12 pm
wah dh wat..3 jam lak tu mmg b’sungguh2 lah wat..tq2 dari ari2 me asyk usha blog bro kulanz nie..bila lah bro nak wat tutorial.hehe apa2 pun tq2
said on March 4th, 2010 at 9:29 pm
haha.. mmg 3 jam lebih buat.. tapi tu campur masa buat kopi, masak makanan dll..
saya tak pandai sangat susun ayat utk tutorial ni, pasal tu jarang buat tutorial… apapun harap farra dpt buat utk header blog farra nanti
kulanz´s last blog ..Membuat Header Banner
said on March 4th, 2010 at 8:15 pm
Erm nak try jugak..
zik´s last blog ..Dasar petrol perlu ambil kira semua aspek
said on March 4th, 2010 at 9:31 pm
Ada masa nanti boleh try bro..
said on March 4th, 2010 at 10:47 pm
salam dah hai,
Banner awak dah ok, kalau tambah effect lagi cun.
kulanz, boleh x awak buat partnership dgn saya? saya tgh cari geng self-hosting guna wordpres. boleh tukar-tukar knowledge. TQ.
Rozanighani´s last blog ..WPShout – Tips Berguna
said on March 4th, 2010 at 11:23 pm
Salam bro,
memang betul tu bro, lagi cun kalau ada effect.. nanti nak try juga..
thanks bro… nak jadi partnership tu xda masalah, tapi saya pun baru juga guna wordpress ni.. masih belajar lagi.. tapi memang sesuailah kalau untuk kongsi knowledge..
kulanz´s last blog ..Membuat Header Banner
said on March 4th, 2010 at 10:50 pm
dahsyat la…dari theme asal boleh berubah jadi macam ni, nak try edit theme kat blog sendiri tapi x reti
khairil´s last blog ..Jom Layan Drama Dan Kumpulan Dari Korea
said on March 4th, 2010 at 10:53 pm
simple je theme ni sbb tu dpt loading laju. senang je modify, cuma concentrate kt css je.
Rozanighani´s last blog ..WPShout – Tips Berguna
said on March 4th, 2010 at 11:27 pm
@khairil, themes blog bro tu pun okey dah tu..
@Rozanighani, betul tu bro.. kalau themes simple memang senang sikit nak modify css nya
said on March 4th, 2010 at 11:54 pm
belajo photoshop dulu le.. nanti baru try buat banner ni..
qimie´s last blog ..Tips Kecantikan.
said on March 5th, 2010 at 12:43 am
boleh tu bro..
said on March 4th, 2010 at 11:58 pm
Alah bisa tegal biasa, dengan latihan lama-lama nanti kita akan jadi expert buat sesuatu perkara tu jugak kan?
Dak Wan®´s last blog ..Sinar Maulidur Rasul
said on March 5th, 2010 at 12:44 am
betul tu.. saya dapat semua ni pun sbb belajar sendiri.. tak pernah belajar secara formal.. kita mula dari bawah.. InsyaAllah, ada kesungguhan.. mesti boleh dapat
kulanz´s last blog ..Membuat Header Banner
said on March 5th, 2010 at 12:41 pm
Kagum ngn bro..asal themes ni biase2 jer, sekali lepas modified..mmg cantik..
p/s – thanks utk tutorial ni..insyaAllah akan ditry..tq bro..
hafizmd´s last blog ..Nak tahu 13 fakta menarik lagi benar tak?
said on March 7th, 2010 at 2:08 am
Terima kasih bro, ini pun bukan buat terus dapat bro, try and error juga.. sbb tu blog ni kadang tu jadi serabut, terutama masa saya tengah mengedit sesuatu..
said on May 13th, 2010 at 5:23 pm
hoho..saye dah try..tapi still belum jadik lagik..maklumlah..saye mmg 100% buta photoshop..huhu..try n error lagi..
hafizmd´s last blog ..Malam yang sungguh bahagia!!
said on March 5th, 2010 at 1:17 pm
wah menarik lanz…thanks for sharing…tp aku x reti design2 gmbr nie..photoshop ada dlm lappy tp ku masih blur cara guna..hehehe
yanmie´s last blog ..TweetDeck Aplikasi Desktop All In One untuk Social Networking
said on March 7th, 2010 at 2:09 am
Samalah, akupun tak kreatif sangat pasal design ni, setakat boleh buat saja.. tapi kalau bukan sekarang bila lagi mau cuba, kan? sebab tu aku belasah jak buat header tu guna kemahiran yg ala kadar
said on March 6th, 2010 at 2:32 pm
ringkas dan mudah difahami tutorial bro ni…memang kemas tersusun..steady
etomyam´s last blog ..Konsep Relativity Yang Einstein Lupa: Kejayaan Dan Relativity
said on March 7th, 2010 at 2:10 am
Terima kasih bro, sayapun tak pandai susun ayat utk buat tutorial ni, sebab tu ambil masa sampai 3 jam utk habiskan penulisan..
said on March 6th, 2010 at 5:21 pm
hebat la bro..aku blum ad mase lg nk buat sume ni..bizi2..huhu
aizuddin´s last blog ..Dapatkan 10 Tiket Percuma Final Raja Lawak Musim 4
said on March 7th, 2010 at 2:12 am
xda lah hebat sangat bro,
akupun baru juga belajar pasal benda-benda ni semua.. memang kelam kabut buat ni, sbb akupun busy juga selalu
said on March 6th, 2010 at 7:20 pm
tq bro kulanz…atas tutorial yang amat berguna…ada kelapangan nanti leh cuba buat..
zures´s last blog ..JANIN MENJADI BAYI
said on March 7th, 2010 at 2:13 am
sama-sama,
ada kelapangan boleh cuba nanti..
said on March 6th, 2010 at 11:26 pm
tutorial ini senang paham..
said on March 7th, 2010 at 2:14 am
alhamdulillah bro kalau senang difahami… tercapai matlamat.. hehe
said on March 7th, 2010 at 10:38 am
aku ni kalau bab buat banner ni memang bodoh sikit. boleh ke tolong kalau di minta..
denaihati´s last blog ..Dijemput ke Majlis Jamuan Petang 1Malaysia bersama PM
said on March 7th, 2010 at 3:05 pm
sama juga bro, akupun tak kreatif sangat buat banner ni, tu pasal buat banner pun statik je.. kalau minta tolong buat boleh, xda masalah.. tapi memang x cantik aku buat
said on March 8th, 2010 at 8:18 am
Salam penuh ceria,
Satu panduan yang cukup berguna bro.Nanti saya cuba buat try & error.Sekarang ini masih mencari tempat nak hosting blog supaya lebih mudah beroperasi..
said on April 4th, 2010 at 10:37 pm
menarik tutorial ni…nak cubalah nanti…hehe…thanks bro…
mohdisa´s last blog ..Koleksi Entri Bulan Mac 2010
said on April 4th, 2010 at 11:00 pm
tak pandai sangat buat tutorial ni bro.. tapi buat juga sbb farra minta hari tu.. harap dapat jadi panduan bro..
said on June 6th, 2010 at 6:08 pm
nice sharing..ini yang ku cari selama ini..hehe
syahrilhafiz´s last blog ..Apa Cer???
said on July 6th, 2010 at 1:42 pm
harap dapat dimanfaatkan bro..
said on July 6th, 2010 at 9:52 am
Thanks atas info yg diberi. Sekurang2nya saya bole cuba…Info yg benar2 berguna utk kami.
Hanie´s last blog ..AZAM TAHUN 2010 – DAH TERCAPAI
said on July 6th, 2010 at 12:47 pm
u’r welcome..
utk perkongsian bersama.. ada masa nanti bolehlah cuba..