Cara Mudah Membagi Dua Kolom Header di Blog

Kolom Header ini sangat banyak manfaatnya bagi para Blogger selain untuk Judul Kolom Header ini juga bisa untuk Kolom Space atau Iklan, dalam Template bawaan Blogger hanya disediakan 1 Kolom saja yakni untuk Judul Blog saja, Oke jangan panjang lebar Langsung saja untuk Share tentang Cara Mudah Membagi Dua Kolom Header di Blog.

Membagi 2 Kolom Header

Langkah-langkahnya sebagai Berikut :

1. Login Ke Blog Anda
2. Klik Rancangan
3. Klik Edit HTML, Jangan lupa Mencentang Expand Template Widget

4. Cari Kode dibawah ini

/* Header
===========
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:#ffffff;
height:190px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

5. Hapus Kode diatas, Lalu Ganti dengan kode dibawah ini

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

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:#ffffff;
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;
}

6. Lalu cari lagi Kode dibawah 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>

7. Hapus Kode Seperti diatas lalu Ganti dengan Kode dibawah 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>

8. Save Template dan Lihat hasilnya

Posted in: Tips Blogger