Membagi Header Menjadi 2 Kolom Kanan Kiri

Situseo Blog : Membagi elemen header menjadi dua kolom kanan dan kiri bisa berguna untuk meletakan widget atau pun adsense, sebagian template yang telah dibuat oleh para designer biasanya mempunyai kolom header hanya satu, tidak menutup kemungkinan ada yang 2 kolom headernya.

Sebelumnya pernah dibahas mengenai cara menambahkan satu elemen diatas header, jika tertarik untuk membacanya, kalian bisa mengklik link tersebut.

Bagi para blogger yang sudah tanggung menggunakan dan sudah cocok dengan template yang dipakai tapi kebetulan bagian elemen headernya hanya satu, kalian bisa mengedit dengan membaginya menjadi dua kolom, kebetulan template yang saya pergunakan juga hanya satu kolom. Sekalian berbagi dengan teman blogger yang templatenya hanya satu kolom dan ingin mengubahnya menjadi dua kolom kanan dan kiri, berikut ini cara membagi header menjadi dua kolom kanan dan kiri.

Contoh kode CSS yang ada dibawah ini merupakan kode CSS template yang saya pergunakan, kemungkinan kode CSS nya berbeda dengan yang kalian pakai, langkah membaginya:

• Login ke akun Blogger - pilih Design/Rancangan - Edit HTML
• Sebelum melakukan penambahan script sebaiknya melakukan backup template terlebih dahulu, dengan men-Download Full Template, supaya mudah mengembalikan template kebentuk semula bila hasilnya tidak sesuai dengan yang di inginkan.
• Selanjutnya cari kode CSS bagian header seperti ini:

#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:970px;
text-align:left;
margin:0;
padding:0;
}

buatlah kode CSS kolom kedua dan tambahkan kode kanan dan kiri, sehingga menjadi seperti ini:

#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:350px;
text-align:left;
margin:0;
padding:0;
float:left;
}
#header2 {
width:350px;
text-align:left;
margin:0px 0 0 0;
padding:0;
float:right;
}

jika kode CSS kalian berbeda dengan kode CSS diatas, kalian perhatikan #header-wrapper { bagian widhtnya. kalian bagi 2 ukurannya dan buat kode CSS nya menjadi #header { dan #header2 { seperti dalam contoh, untuk penamaan kode CSS nya itu terserah kalian yang penting nama tersebut belum ada dalam template.

Selanjutnya carilah kode seperti ini:

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

Sisipkanlah kode yang berwarna merah sebagai kode ID pemanggil kode CSS tersebut diatas, sehingga menjadi seperti ini:

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

Save template kalian dan lihat hasilnya dibagian Page Element, jika sudah sesuai dengan yang diinginkan, kalian bisa langsung mengisi kolom header yang baru tersebut dengan widget atau adsense, selamat mencoba.

Semoga bermanfaat,