Pasang Banner di Header Blog
Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :
"Bagaimana caranya menyimpan banner pada header blog"
Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.
Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.
Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.
Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.
Untuk Template Klasik
Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :
http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif
dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):
Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :
Sign in di blogger
Klik menu Template
Klim menu Edit HTML
Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
/* Header ----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;
}
}
Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee; <-- hapus (delete)
border-width:1px 1px 0; <-- hapus (delete)
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee; <-- hapus (delete)
border-width:0 1px 1px; <-- hapus (delete)
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
Klik tombol Pratinjau untuk melihat perubahan
Jika sudah OK, klik tombol Simpan Perubahan Template
Selesai.
Untuk template baru
Bagi sobat pengguna template baru, bisa menggunakan dua cara.
Cara pertama :
Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
Klik kotak kecil di samping tulisan Expand Template Widget
Tunggu beberapa saat sampai proses selesai
Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
/* Header -----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;
}
}
Klik tombol Pratinjau untuk melihat perubahan yang ada
Bila sudah OK, klik tombol SIMPAN TEMPLATE
Selesai.
Langkahnya diatas sama dengan yang di template klasik.
Cara kedua :
Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
Klik kotak kecil di samping tulisan Expand Template Widget
Tunggu beberapa saat sampai proses selesai
cari kode berikut pada template sobat :
<b:section class='header' id='header' maxwidgets='1'>
pada kode maxwidgets='1'. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini :
<b:section class='header' id='header' maxwidgets='2'>
Klik tombol SIMPAN TEMPLATE
Nah itu langkah pertama, langkah selanjutnya adalah :
Klik menu Elemen Halaman
KLik tulisan Edit yang ada pada elemen Header
Tunggu beberapa saat
Pilih radio button yang ada di samping tulisan dari komputer Anda
Klik tombol Browse...
Pilih banner yang telah di buat yang ada pada komputer sobat
Tunggu beberapa saat sampai proses selesai.
Gambar banner sobat akan di tampilkan
Klik tombol SIMPAN PERUBAHAN
Selesai.
Nah silahkan sobat lihat hasilnya!