Memasang kolom header disamping judul blog

Untuk Template Klasik
Sebelumnya saya pernah bahas pada artikel tentang pemasangan widget banner yang menjelaskan cara memasang widget untuk banner/iklan.Kali ini dilain posisi,banner yang akan saya jelaskan adalah peletakkan di header blog.Saya ambil contoh berikut dari kolom tutorial milik kang rohman:
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 :

1. Sign in di blogger
2. Klik menu Template
3. Klim 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 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; } }
6. 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; }
7. Klik tombol Pratinjau untuk melihat perubahan
8. Jika sudah OK, klik tombol Simpan Perubahan Template
9. Selesai.

Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.
Cara pertama :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. 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; } }
8. Klik tombol Pratinjau untuk melihat perubahan yang ada
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. 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'>
8. Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

1. Klik menu Elemen Halaman
2. KLik tulisan Edit yang ada pada elemen Header
3. Tunggu beberapa saat
4. Pilih radio button yang ada di samping tulisan dari komputer Anda
5. Klik tombol Browse...
6. Pilih banner yang telah di buat yang ada pada komputer sobat
7. Tunggu beberapa saat sampai proses selesai.
8. Gambar banner sobat akan di tampilkan
9. Klik tombol SIMPAN PERUBAHAN
10. Selesai.

Spesial Thanks to : http://kolom-tutorial.blogspot.com/