Cara Membuat Header Blog Menjadi 2 Kolom

Yah .. kali ini saya akan membagi pengalaman lagi deh, waktu itu template header blog saya hanya satu kolom, tapi neh saya bagi menjadi dua kolom !

Hasil dari bolak -balik blog nya Kang Rohman dan akhirnya dapet tutorialnya !

Lihat aja di blog ini di kolom itu saya isi dengan Search Enggine !

Pengen tahu caranya ... Berikut cara membuat header blog menjadi dua kolom

Pertama login ke blogger

Klik Layout

Klik tab elemen Halaman

Kemudian klik tab Edit HTM,

Lihat ke bagian kode CSS, lalu cari kode seperti ini :


/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

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




Hapus kode di atas, lalu ganti dengan kode berikut ini :


/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
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;
}

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




Kemudian scroll ke bagian bawah, dan cari kode seperti ini :



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



Hapus kode di atas, lalu ganti dengan kode di bawah 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='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>


Klik tombol Simpan Perubahan.

Selesai dah ...
coba lihat .. sudah berhasil belum ..
Semoga aja berhasil ya ...


Baca juga : Cara membuat postingan dan sidebar berpindah tempat