Pengertian Elemen Header dan Cara Membagi Menjadi Beberapa Kolom

Cara Menambah dan Membagi Elemen Header Menjadi Beberapa Kolom ||  Di sini Bedlimciti akan 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:

Tetapi sebelum kita lanjut beranjak ke TKP akan lebih pantasnya admin menyapa poro sedulur terlebih dahulu, Pie kabare poro sedulur sedulur ku sehat to pastinya. Sudah Tau belum Apa itu Elemen Header? dan bagai mana cara menambanhnya?

Pengertian Elemen Header Pada HTML Blogger

Elemen Header pada HTML adalah susunan dari tag pembuka sampai tag penutup, elemen html didefinisikan oleh tag pembuka, lalu di lanjutkan oleh kontent lalu di akhiri oleh tag penutup.

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">
&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 sobat sudah betul.

Elemen Header Menjadi Beberapa Kolom
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. 

Baca Juga : Cara Memperlebar Halaman Template Dengan HTML

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:

Elemen Header Menjadi Beberapa Kolom


0 komentar