Cara Membuat Header Menjadi 2 Kolom

Pada template standar dari blogger biasanya header blog kita hanya berupa 1 buah kolom header, tapi ketika kita berkunjung ke blog teman - teman yang lain terdapat 2 sampai 3 kolom header
..
Bagaimana cara membuatnya..

Oleh karena itu kali ini kita akan membahas bagaimana Cara membuat header menjadi 2 kolom yang berada di kiri dan kanan, dimana kolom header yang ada di sebelah kanan bisa kita manfaatkan untuk menaruh banner iklan atau apa saja..

Tanpa harus saya jelaskan panjang lebar lagi berikut cara membuat header menjadi 2 kolom


Berikut langkah-langkahnya:

1. Login ke blog sobat

2. Klik Rancangan

3. Klik Edit HTML

4. Jangan lupa centang Expand Template Widget

5. Cari kode css yang mirip kode di bawah ini

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

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

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

Hapus kode tersebut dan ganti kode dibawah ini

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

#head-inner {
width:480px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

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

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

6. Kemudian
cari kode seperti di bawah ini

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

Hapus kode teesebut, kemudian 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='Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

7. Klik Simpan, Selesai..




Sumber: http://lovelizzers.blogspot.com/2011/06/cara-membuat-header-menjadi-2-kolom.html

Label/Kategori: Tutorial Blog

Baca Terkait Lainnya..