Menambahkan Kolom Baru di Samping Header

Menambahkan kolom baru disamping header bukanlah hal yang sulit. Sebelumnya teman2 sudah tau kan apa yang dimaksud dengan header?. Header itu merupakan bagian atas dari halaman blog kita, dimana header ini merupakan space buat judul blog kita. Nah setelah teman2 telah mengenal header, sekarang kita akan membuat satu kolom baru di samping header tersebut.

Untuk pembuatan kolom baru ini, teman2 cukup hanya mengotak-atik kode HTML blog teman-teman sekalian. Untuk lebih jelasnya, kita akan lakukan langkah2 di bawah ini.

• Masuk ke blogger dengan ID saudara
• Pada Dasbor blog anda, silahkan pilih Rancangan
• Kemudian pilih Edit HTML
• Setelah itu, silahkan anda cari kode yang mirip dengan kode di bawah ini (Cara cepat Ctrl+F)

#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

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

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

• Setelah ketemu, ganti kode tersebut dengan kode di Bawah ini

#header-wrapper {
width:900px;
margin:0 auto 0px;
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;
}

#header-right{
width:300px;
float:left;
padding-top:10px;
}

Keterangan :

• Kode warna hijau adalah kode untuk kolom baru disamping header
• Kode warna merah adalah ukuran header yang telah dibagi

 Sekarang cari kode yang mirip seperti ini:

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

• Silahkan ganti kode tersebut 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='JUDULBLOGKALIAN (Header)' type='Header'/>
</b:section>
</div>
<div id='header-right'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div&gt

Intinya Kalian hanya membagi UKURAN lebar header dan menambahkan kode warna hijau diatas.

• Simpan Template kalian dan kalau berhasil akan seperti ini tampilannya :
  
  
  
  Setelah Kolom baru disamping header kalian terbentuk, sekarang kalian tinggal menyisipkan script.