Asrizal Wahdan Wilsa

Written By Master on Senin, 04 Oktober 2010 | 07.09

Asrizal Wahdan Wilsa

Cara Membagi Dua Kolom Header

Posted: 03 Oct 2010 11:07 PM PDT

Cara Membagi Dua Kolom Header merupakan cara yang banyak digunakan oleh para blogger. pada kebanyakan template fasilitas ini sudah tersedia namun ada juga yang belum tersedia, begitupun dengan salah seorang sahabat blogger yang bertanya mengenai cara membagi dua kolom header, untuk itu saya posting pada artikel kali ini. setelah pada artikel sebelumnya saya membahas mengenai cara membuat footer 3 kolom dengan background.
untuk lebih jelasnya lihat gambar dibawah ini yaitu header yang hanya memiliki 1 kolom :

Dari gambar diatas jika kita memasang gambar di header maka disamping header tidak ada variasi apa-apa, namun jika membagi dua kolom header, maka sebelah kanan header dapat kita tambahkan banner/ads. bagaimana cara membagi dua kolom header? mari kita simak tutorialnya.
  • Login ke account blog anda
  • Klik rancangan
  • Klik edit html lalu expand widget template
  • Cari kode Css yang mirip dengan 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;
}
  • Hapus kode diatas dan 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;
}
  • Lalu cari kode <div id='header-wrapper'> seperti 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>
  • Hapus kode diatas dan 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>
  • Simpan hasil kerja anda dan lihat hasilnya
Untuk melihat berhasil atau tidaknya, tampilan rancangan jika berhasil akan seperti gambar dibawah ini :


----Semoga Bermanfaat----