Menambah Elemen Header dan Membagi Beberapa Kolom

Pengen tau cara menambah elemen header? membagi menjadi beberapa bagian? Berikut cara menambah dan membagi ke beberapa bagian elemen header blogspot Anda seperti gambar berikut:

• Login ke Blogger > Tata LeTak > Edit HTML
• Backup template untuk menghindari kesalahan.
• Cari kode ]]></b:skin>
• Tambahkan kode berikut di atas kode atas

#under_header1{
}

#under_header2{
float:left;
width:33.33%;
}

#under_header3{
float:left;
width:33.33%;
}

#under_header4{
float:right;
width:33.33%;
}

• kemudian cari kode:

<b:section class='header' id='header' maxwidget="1" showaddelement="no"> </b:section> </div>
Tambahkan kode berikut persis di bawah kode di atas:

<div id="under_header1">
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

<div id="under_header2">
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id="under_header3">
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id="under_header4">
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

• Simpan template, selesai.
• Jika ingin sperti ini:

• ubah poin ketiga di atas menjadi:

#under_header1{
float:left;
width:33.33%;
}

#under_header2{
float:left;
width:33.33%;
}

#under_header3{
float:right;
width:33.33%;
}

#under_header4{
float:left;
width:100%;
}

• Jika ingin seperti ini:

• ubah poin tiga dengan ini

#under_header1{
float:left;
width:25%;
}

#under_header2{
float:left;
width:25%;
}

#under_header3{
float:left;
width:25%;
}

#under_header4{
float:right;
width:25%;
}

• Jika ingin lebih banyak seperti ini:

• ganti lagi poin tiga dengan ini:

#under_header1{
}

#under_header2{
float:left;
width:50%;
}

#under_header3{
float:right;
width:50%;
}

#under_header4{
float:left;
width:33.33%;
}

#under_header5{
float:left;
width:33.33%;
}

#under_header6{
float:right;
width:33.33%;
}

#under_header7{
float:left;
width:25%;
}

#under_header8{
float:left;
width:25%;
}

#under_header9{
float:left;
width:25%;
}

#under_header10{
float:right;
width:25%;
}

#under_header11{
float:left;
width:50%;
}

#under_header12{
float:right;
width:50%;
}

#under_header13{
float:right;
width:50%;
}

]]>

• dan poin empat akan seperti ini:

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

<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

aaa<div id='under_header2'>
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id='under_header3'>
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

<div id='under_header5'>
<b:section class='header' id='underheader5' preferred='yes'/>
</div>

<div id='under_header6'>
<b:section class='header' id='underheader6' preferred='yes'/>
</div>

<div id='under_header7'>
<b:section class='header' id='underheader7' preferred='yes'/>
</div>

<div id='under_header8'>
<b:section class='header' id='underheader8' preferred='yes'/>
</div>

<div id='under_header9'>
<b:section class='header' id='underheader9' preferred='yes'/>
</div>

<div id='under_header10'>
<b:section class='header' id='underheader10' preferred='yes'/>
</div>

<div id='under_header11'>
<b:section class='header' id='underheader11' preferred='yes'/>
</div>

<div id='under_header12'>
<b:section class='header' id='underheader12' preferred='yes'/>
</div>

<div id='under_header13'>
<b:section class='header' id='underheader13' preferred='yes'/>
</div>

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

• Simpan dan semoga berhasil. ;)