Membuat header jadi 2 kolom

Template buatan blogger tentu saja sudah diperhitungkan akan segala kemudahan yang akan diperlukan oleh pengguna. Akan tetapi masih saja pengguna belum merasa puas dengan kondisi asli dari template tersebut. Sehingga dengan demikian banyak sekali pengguna akan merubah bentuknya, disesuaikan dengan selera dari pengguna. Salah satunya dengan mengubah tampilan pada header. Header biasanya hanya satu kolom, untuk anda/panjenengan yang akan menambah menjadi 2 kolom, ikuti langkah-langkahnya sebagai berikut:

    Login ke blogger anda dengan ID kepunyaan sendiri
    Klik Layout
    Klik Elemen Halaman
    Terus Klik Edit HTML. dan cari kode CSS 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-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;
}


    Coba cari ke bagian bawah, sampai ketemu 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 simpan Perubahan
    Selesai, untuk lihat hasil klik Tata Letak