Cara Membagi Header Menjadi 2 Kolom

Unknown | Kamis, Mei 24, 2012 | Tutorial Blog Assalamu'alaikum sobat, semoga semua dalam keadaan sehat. Kali ini kita akan sama-sama belajar mengenai cara membagi header menjadi 2 kolom. Caranya: Back up dulu template sobat, trus klik edit HTML.
Cari kode berikut :

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
  color: $(header.text.color);
}
.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
  padding: 15px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}

Hapus/Ganti dengan kode dibawah ini :

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}
#header-wrapper {
margin:0 auto 0px;
height:70px;
}
#head-inner {
width:285px;
background-position: left;
text-align: justify;
margin-left: auto;
margin-right: auto;
float:left;
}
#header-kanan{
width:485px;
float:right;
}
#header h1 {
  color: $(header.text.color);
margin: 0px;
text-align: left;
}
.Header h1 a {
  color: $(header.text.color);
}

Atur ukuran lebarnya sesuai dengan lebar headernya.

 Kemudian Cari kode Berikut:

 <header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Linux For Human Begin (Header)' type='Header'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>

Hapus/Ganti kode diatas dengan kode berikut :

<header>
    <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='Linux For Human Begin (Header)' type='Header'/>
</b:section>
</div>
<div id='header-kanan'>
<b:section class='header' id='header2' preferred='yes'>
</b:section>
</div>
</div>
    </header>

Klik pratinjau, Jika gak error, Klik Simpan Template.

Demikian bahan yang bisa kita pelajari, sampai jumpa lagi (Insya Allah).

Admin : Unknown ~ The Journey Barlie's Blog

Artikel Cara Membagi Header Menjadi 2 Kolom Semoga bermanfaat, untuk kritik dan saran silahkan klik poskan komentar dibawah atau tinggalkan pesan di CBOX. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini.