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