Membagi 2 Kolom Header di Blogspot

Membagi 2 Kolom Header di Blogspot - Umumnya banyak template yang hanya menyediakan 1 buah header. Namun, kita dapat memodifikasi nya menjadi 2 kolom. Biasanya, yang pake 2 kolom ini untuk judul blog dan 1 kolom lagi untuk tempat banner. Nah, tutorial ini cocok banget buat yang mau cari duit dengan membuka space iklan di header nya. Langsung liat nih demo nya berikut ini.

• Login ke akun blogger.com
• Pilih Rancangan --> Edit HTML
• Lakukan backup template, untuk menghindari kesalahan yang fatal.
• Sekarang cari kode CSS seperti yang mirip beikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Ganti kode diatas dengan kode dibawah ini:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header-two{
width:50%;
float:left;
padding-top:10px;
}

Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka width dengan lebar header template kamu.

• Sekarang cari kode seperti berikut:

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

Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
 

<div id='header-wrapper'>

<div id='header-one'>

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

<div id='header-two'>

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

</div>

</div>

 Terakhir silahkan simpan :)