Cara Membuat Header Blog Menjadi 2 Kolom

---

K

alou Kita Sering Melihat-lihat blog/site orang lain yang di headernya terdapat Iklan/Banner disamping judul atau nama blog/sitenya karena mereka mempunyai 2kolom atau ada juga yang 3 kolom . Namun kali ini kita akan mencoba untuk membuat kolom header menjadi 2 yakni kiri dana kanan, mana tahu nantinya para sahabat blogger mau meletakkan Iklan Banner di samping Judul blog/sitenya, Nah untuk membuatnya Sahabat blogger cukup mengikuti langkah-langkah Berikut:

---

Login ke blogger

Klik Layout

Klik tab Elemen Halaman

Kemudian klik tab Edit HTML,

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, dan 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, dan 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>

Keterangan

Untuk width:....px;,height:....px;,dan  color:#......;Silakan anda sahabat blogger sesuaikan dengan blog/site anda 
Simapan Perubahan ...
lihat hasilnya...

Posted in: ttg blog