Cara Membagi Blogger Header Menjadi Dua Bagian 1

Membagi Blogger header menjadi dua bagian ini juga artinya menambahkan satu kolom (gadget) pada bagian header.Adapun manfaat dari membagi header menjadi dua bagian , diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada bagian header tersebut.

Dan adapun langkah-langkahnya adalah :

1. login ke blogger dengan ID sobat.

2. Pilih/Klik More Options.

3. Pilih Template.

4. Backup/Restor dulu template anda.

5. Pilih/klik Edit Html.

6. Centang tulisan "expand template widget".

7. Default code Header (kode asli lebar header 660px).lihat contoh css code dibawah.


#header-wrapper {
width:660px;
margim:0 auto 10px;
boder; ipx solid $bordercolor;
}
#header-inner {
background-position:center;
margin-left:auto;
margin-right:auto;

}

8. Setelah anda mengetahui lebar header wrapper, cari kode main header di bawah ini,

letaknya berada dibawah kode di atas.


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

9. Setelah menemukan kode pada no 8, tambahkan kode di bawah ini kedalam kode diatas .


float:left;
width:350;


Sehingga menjadi seperti di bawah ini .

#header {

float:left;
width:350;
color:#FFFFFF;
margin:0px;
text-align:left;
}

10. Membuat bagin header kedua, Copy kode dibawah ini dan pastekan di bawah kode

diatas.


#header2 {
float:right;
width:250px;
}


maka akan seperti dibawah ini pada templete

#header {
float:left;
width:350;
color:#FFFFFF;
margin:0px;
text-align:left;
}

#header2 {
float:right;
width:250px;
}

#header h1{
}

11. Selanjutnya pada bagian body html kode cari kode di bawah ini (untuk mempermudah

pencarian tekan F3 atau ( Ctrl+ F ))

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

12. Setelah anda menemukan kode di atas ( no 11) copy kode di bawah ini dan pastekan

di atas kode </div>pada kode di atas .

<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>

sehingga seperti dibawah ini lihat kode di bawah.

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

<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>


</div>

13. Simpan templete anda


Selesai dan semoga bermanfaat........