Menambah Kolom Header

Menambah Kolom Header - Artikel ini bagaimana menambah header disamping header bawaan blogger dan akan menjadi 2 kolom. Kalau header bawaan blogger kan cuma satu kolom termasuk di rancang template. Nantinya elemen baru di header dapat digunakan untuk menempatkan widget sesui kebutuhan seperti RSS Feedburner, menampilkan label dll.

Barang kali ada yang ingin menambah elemen header pada blognya. Kalau tidak sekarang ya mungkin nanti kalau blognya sudah berkembang dan membutuhkan banyak tempat. Sebagai informasi saja yang saya gunakan adalah template default blogger Minima. Template ini dapat ditemukan di minima template

Menambah Elemen Header

1. Pergilah ke dasbor blogger dengan id anda
2. Tuju Rancangan
3. Klik Edit HTML
4. Backup template anda, klik Download Template Lengkap

Kode CSS

5. Cari kode CSS seperti ini :

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

6. Ganti dengan kode CSS dibawah ini :

#header-wrapper {
  background:#cccccc;
  width:910px;
  margin:0 auto 0px;
  height:80px;
  }
#header {
  text-align:left;
  }
#header-left {
  width:350px;
  margin-left:0;
  margin-right:auto;
  float:left;
  padding-top:0;
  }
#header-right{
  width:468px;
  float:right;
  padding-top:0;
  }
#header h1 {
  margin:0;
  padding:10px 10px 0px;
  line-height:1em;
  font: $pagetitlefont;
  color:$pagetitlecolor;
  }

HTML Halaman Body

7. Sekarang 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='NamaBlogAnda (Header)' type='Header'/>
</b:section>
</div>

8. Hapus kode itu dan ganti dengan kode ini:

<div id='header-wrapper'>

<div id='header-left'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NamaBlogAnda (Header)' type='Header'/>
</b:section>
</div>
 

<div id='header-right'>

<b:section class='header' id='header2' preferred='yes'/>

</div>

</div> 

9. Save
10. Selesai

Kode yang berwarna merah sesuikan dengan template anda, juga kode CSS nya dapat disesuikan dengan keinginan anda. Untuk melihat hasilnya, masuk ke Elemen Halaman. Jika langkahnya benar maka di sana sudah ada dua header kiri dan kanan. Selamat anda telah berhasil menambah elemen header. Kalau belum berhasil dicoba terus dengan teliti, cermati yang berwarna merah, pasti bisa.