Cara Membuat Kolom Widget di Sebelah Kanan Header

Tutorial kali ini saya tujukan khusus bagi yang menggunakan template Thesis SEO Blogger dari Blog Juragan, template yang sedang saya gunakan saat ini. Seperti kita ketahui bahwa header template tersebut hanya memuat satu kolom. Namun, di dalam HTML template tersebut sudah ada potongan kode CSS untuk header bagian kanan yaitu #r_head.

Kita tinggal menyempurnakan kode-kodenya saja agar header tersebut dapat terbagi menjadi dua kolom. Nantinya, kolom widget yang ada di kanan header ini akan mempunyai lebar sebesar 468 piksel. Cocok bila ingin menaruh banner ukuran 468 x 60.

Baiklah, langsung saja ke topik bahasan kita yaitu cara membagi dua kolom header pada template Thesis SEO Blogger. Berikut ini langkah-langkahnya. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini berguna jika nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.

4. Cari deretan kode seperti di bawah ini.

#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}

5. Kemudian ganti kode-kode tersebut dengan kode di bawah ini.

#header-inner {
width:432px;
background-position:left;
margin-left:auto;
margin-right:auto;
float:left;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:468px;
float:left;
padding-top:10px;
}

6. Setelah itu carilah kode seperti di bawah ini.

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

7. Kemudian tambah kode berwarna merah sehingga hasilnya menjadi seperti di bawah ini.

<div id='header-inner'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>

</b:section>

</div>

<div id='r_head'>

<b:section class='header' id='header2' preferred='yes'/>

</div>

</div>

8. Klik tombol "SIMPAN TEMPLATE".

9. Lihat hasilnya pada tab Elemen Laman.