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 :)

| Source: http://4-jie.blogspot.com/2012/07/membagi-2-kolom-header-di-blogspot.html