Cara Pasang Banner di Header Blog

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 anda harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner,anda bisa menggunakan berbagai program desain grafis yang anda kuasai, Photoshop, Coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner. jika sobat masih belum mahir dengan membuat banner di photoshop silahkan sobat bisa mengikuti Tutorial cara membuat banner blog di photoshop yang sudah saya postin.
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 contoh , 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. Sebagai contoh, saya sudah upload banner di blogger milik saya dan mempunyai alamat banner seperti ini : 

http://2.bp.blogspot.com/-ALZ5a5qQ09g/Tvd7pcxSKjI/AAAAAAAABBs/-QbQ_hSJgro/s1600/banner+kliklabel+update+27-11-11.jpg

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil dan ini blog saya tempo dulu hehe):





Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :


1. Sign in di blogger sobat

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template

5. Sisipkan kode berikut pada style sheet css anda. 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://2.bp.blogspot.com/-ALZ5a5qQ09g/Tvd7pcxSKjI/AAAAAAAABBs/-QbQ_hSJgro/s1600/banner+kliklabel+update+27-11-11.jpg) no-repeat top center; } }

6. Jika anda ingin menghapus garis yang berada di tepi banner, anda 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; }

7. Klik tombol Pratinjau untuk melihat perubahan

8. Jika sudah OK, klik tombol Simpan Perubahan Template