Membuat Header Menjadi 2 Kolom

Kita tahu, header bawaan dari blogspot (all templates) hanyalah terdiri dari satu kolom memanjang horizontal yang biasanya di jadikan sebagai tempat judul blog.

Nah, kolom header itu tentu saja bisa kita belah menjadi dua. Tapi butuh ketelitian untuk memasang scriptnya.

1. Sebelum Agan memulai, sebaiknya Agan baca dulu hal-hal yang harus di perhatikan ketika hendak mengedit template. Baca di sini.  <---klik.

2. Jika sudah, waktunya kita praktek. Masuk ke Template.

3. Klik Edit HTML. Pilih Lanjutkan.
__Tidak perlu centang expand template widget.

4. Carilah kode yang mirip dengan ini. Tidak harus sama persis.
__Gunakan CTRL F untuk memudahkan pencarian.

/* 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);
}

5. Jika sudah ketemu, hapus dan ganti dengan kode 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);
}

6. Perhatikan. Angka 70 pada kode ini.

#header-wrapper {
margin:0 auto 0px;
height:70px;

Adalah ukuran tinggi antara batas header dengan tab. Itu bisa Agan setel nanti kalau sudah selesai.

Begitu juga angka 485 pada kode ini.

#header-kanan{

width:485px;

float:right;

Adalah ukuran lebar kolom header yang kanan. Itu bisa Agan setel nanti kalau sudah selesai.

7. Oke, selanjutnya cari kode seperti ini.
Patokannya adalah kode  <header> sampai  </header>.

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

8. Jika sudah ketemu, hapus kode itu lalu ganti 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>

9. Klik "Pratinjau" untuk memastikan apakah ada kesalahan atau tidak. Jika tidak, langsung saja klik SIMPAN.

Semangat gannn !!