Membuat Header Banner

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

• Share
• Tweet

Kata kunci artikel:

Terima kasih kepada semua pembaca Kulanzsalleh.com. Semua Artikel di blog ini adalah berdasarkan pandangan peribadi saya sendiri melainkan artikel berbentuk ilmiah, berita, petikan dan perkongsian lain yang tiap satunya akan saya nyatakan sumber asalnya (Baca Terma & Syarat). Jika anda dapati artikel di blog ini bermanfaat, anda boleh kongsikan kepada pembaca lain di FACEBOOK atau TWITTER.