Cara Menambahkan 2 Kolom Elemen Halaman Di Bawah Header

Kali ini kita bahas desain template, fokusnya pada elemen. Saya akan berikan cara termudah menambah 2 kolom elemen halaman di bawah header.

Hal penting yang harus anda lakukan Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap. Silahkan save dulu template anda, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

Ok, kita lanjutkan, caranya sangat mudah, ikuti langkah-langkah berikut ini :

Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'>

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Lalu klik Simpan Template....
Selesai.....