Cara Membuat 2 Kolom atau 3 kolom di Bawah Header

Agar tampak lebih indah dan menarik sebaiknya kita buat dua atau tiga kolom.Sebagi contoh saya sajikan gambar letak gadget dua dan tiga kolom di bawah header.
 






1.Masuk Blogger dengan ID anda
2.Klik Tata Letak
3.Klik submenu Edit HTML
4.Centang kotak kecil di pojok kanan atas samping Expand Template Widget,tunggu proses loading selesai.
5.Cari kode seperti ini ]]></b:skin>
6. Copy Paste kode di bawah ini tepat di atas kode    ]]></b:skin>

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

kode CSS,silahkan edit border.padding dan jenis garisnya.
Sekarang kita pasang kode HTML nya
7.Cari kode seperti ini :
<div id='main-wrapper'>
8.A.Letakkan kode berikut di atas kode tadi.( untuk dua kolom di bawah 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>

8.B.Letakkan kode berikut di atas kode tadi.( untuk tiga kolom di bawah header )

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

9.Simpan Template
Untuk melihat hasilnya klik Elemen Laman
Selamat mencoba........

Related Post: