Di sini saya ingin berbagi untuk sobat yang ingin
membagi elemen
header menjadi beberapa kolom. Sobat bisa menaruh daftar
isi,iklan,link atau apa saja yang sobat suka. Jika satu kolom header
yang tersedia dirasa masih kurang cukup untuk menambahnya sobat 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 sobat pilih tata letak kemudian klik
edit html.
2. Jangan kasih tanda centang pada expand template
widget.
3. Cari kode
]]></b:skin>
dan letahkan 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">
<b: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 sobat sudah
betul.
Jika sobat ingin menambahkan lagi kolom yang sejajar dengan elemen
tadi,sobat tinggal menambah(sisipkan)kode pada poin
3
dan
5.
Yang perlu sobat perhatikan pada poin 3 pada kode terkhir harus pada
posisi
right:
#under_header5{
float:
right;
width:25%;
}
Tapi jika sobat ingin menambahkan beberapa kolom dibawahnya sobat 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:
