Menambahkan Kolom Baru disamping Header

Bissmillahirrohmaanirrohiim ... Sebelumnya saya berterima kasih kepada semua sahabat blogger yang telah berkunjung dan memberikan komentarnya di blog ini. Pada postingan kali ini saya akan mencoba menjelaskan sekaligus menjawab pertanyaan salah satu sahabat blogger tentang header dan iklan disamping header saya :

mantap headernya... mas mau tanya dong cara bikin iklan disamping gambar header atau berada pada header seperti yang dipakai saat ini..gimna caranya tuh?? kasih tau dong..

Sebenarnya untuk membuat Iklan tersebut, kita tinggal menambahkan kolom baru disamping header blog kita. Intinya yang harus kita lakukan adalah membagi ukuran lebar header kita menjadi 2 kolom.

Sebagai contoh dalam template kita lebar headernya 900px, otomatis kita harus membaginya menjadi 2 (untuk pembagian tidak harus atau tidak wajib sama 50% 50%, tergantung keinginan kalian). Misalkan Kita ambil contoh lebar kolom A 400px dan lebar kolom B 500px. Perhatikan gambar header biasa yang belum di bagi menjadi 2 kolom.

Untuk lebih jelasnya cara membuat kolom baru disamping header silahkan kalian baca tahap-tahapnya dibawah ini :

1. Login ke blogger kalian
2. Pilih Rancangan --> EDIT HTML (centang expand template widget)
3. INGAT : Back up template kalian untuk menjaga terjadinya kesalahan
4. Cari kode yang mirip kode berikut (karena tiap template kode berbeda)

#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

5. Setelah ketemu, kalian ganti kode diatas dengan kode berikut :

#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#header-right{
width:300px;
float:left;
padding-top:10px;
}

Keterangan :

• Kode warna merah adalah kode untuk kolom baru disamping header
• Kode warna biru adalah ukuran header yang telah dibagi

6. Sekarang kalian cari kode yang mirip kode berikut :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDULBLOGKALIAN (Header)' type='Header'/>
</b:section>
</div>

7. Silahkan Kalian Ganti Kode diatas dengan kode dibawah ini:

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDULBLOGKALIAN (Header)' type='Header'/>
</b:section>
</div>
<div id='header-right'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Catatan :
Intinya Kalian hanya membagi UKURAN lebar header dan menambahkan kode warna MErAH diatas.

8. Simpan Template kalian dan kalau berhasil akan seperti ini tampilannya :

Setelah Kolom baru disamping header kalian terbentuk, sekarang kalian tinggal menyisipkan script iklan atau gambar iklan kalian disana dengan cara sebagai berikut:

1. KLIK Elemen Halaman
2. KLIK tambah gadget disamping header
3. Pilih HTML/Java Script
4. Masukan Script kode gambar iklan kalian didalam konten HTML/Java Scriptnya.
5. Jangan lupa disimpan

Sekali lagi saya ingatkan jangan lupa memback up template kalian untuk menjaga kesalahan.

Semoga jawaban diatas akan sangat bermanfaat dan membantu sahabat blogger, dan sekali lagi terima kasih.