Download File

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=headerid=headermaxwidget="1showaddelement="no">
&ltb:widget id=header1locked=truetitle=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=headerid=headermaxwidget="1showaddelement="no">
<b:widget id=header1locked=truetitle=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: