Menambah dan Membagi Elemen Header Menjadi Beberapa Kolom

Di sini saya ingin berbagi untuk kamu yang ingin membagi elemen header menjadi beberapa kolom. Kamu bisa meletakkan daftar isi, iklan, link atau apa saja yang kamu suka. Jika satu kolom header yang tersedia dirasa masih kurang cukup untuk menambahnya kamu bisa ikuti beberapa langkah dibawah ini:

Disini kita akan coba menambah 4 kolom dibawah header yang nanti hasilnya akan terdapat 1 kolom penuh (100%) dan 4 kolom dari hasil pembagian (25% x 4). Selanjutnya kita masih bisa menambahkan lagi menjadi beberapa kolom.

Langkah-langkahnya:

1. Login ke blog kamu pilih tata letak kemudian klik edit html.

2. Jangan kasih tanda centang pada expand template widget.

3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya.

Hingga hasilnya seperti kode dibawah ini:

#under_header{

float:left;

width:100%;

}

#under_header1{

float:left;

width:25%;

}

#under_header2{

float:left;

width:25%;

}

#under_header3{

float:left;

width:25%;

}

#under_header4{

float:right;

width:25%;

}

]]></b:skin>

4. Kemudian cari kode:

<div id='header-wrapper'>
<b:section class='header'id='header'maxwidget="1'showaddelement="no">
&ltb:widget id='header1'locked='true'title='nama blog sobat(header)'
type='header'/>
</b:section>
</div>

5. Jika sudah ketemu letakkan kode dibawah ini tepat dibawahnya hingga hasilnya sbb:

<div id='header-wrapper'>
<b:section class='header'id='header'maxwidget="1'showaddelement="no">
<b:widget id='header1'locked='true'title='nama blog sobat(header)'
type='header'/>
</b:section>
</div>

<div id='under_header'>

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

</div>

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

6. SIMPAN TEMPLATE kemudian klik tata letak. Jika yang nampak seperti pada gambar dibawah ini berarti kerja kamu sudah betul.

Jika kamu ingin menambahkan lagi kolom yang sejajar dengan elemen tadi, kamu tinggal menambah (sisipkan) kode pada poin 3 dan 5.

Yang perlu kamu perhatikan pada poin 3 pada kode terkhir harus pada posisi right:

#under_header5{

float:right;

width:25%;

}

Tapi jika kamu ingin menambahkan beberapa kolom dibawahnya kamu perlu menambah kode dibawahnya lagi.

Ini adalah penambahan beberapa kolom dibawahnya:

#under_header1{
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
#under_header5{
float:left;
width:33.33%;
}
#under_header6{
float:left;
width:33.33%;
}
#under_header7{
float:right;
width:33.33%;
}
#under_header8{
float:left;
width:50%;
}
#under_header9{
float:right;
width:50%;
}
#under_header10{
float:left;
width:100%;
}

Tambahkan juga kode pada poin 4 #under_header{ dengan menambah urutan angka-angka kodenya

<div id='under_header'>

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

</div>

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

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

Gambar dari Hasil penempatan kode-kode diatas: