Membuat Multi Kolom Di bawah Header ...!

Setelah sebelumnya kita saya memposting artikel tentang membuat 2 kolom dibawah Header, Sekarang saya akan menjelaskan cara membuat multi kolom dibawah header, jadi jumlah kolom yang kita buat tidak hanya 2, bisa 3 kolom atau bahkan lebih sesuai keinginan kalian.

Untuk membuatnya kita harus login dulu ke blogger, setelah itu kalian baca kelanjutannya dibawah ini :

1. Pilih Rancangan ---> EDIT HTML ( Centang Expand Widget Template )
2. Simpan CSS berikut sebelum kode ]]></b:skin>

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

3. Sekarang simpan kode berikut Tepat DIATAS kode <div id='main-wrapper'>

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

Keterangan :
== Kode diatas hanya akan menampilkan 2 kolom dibawah header, Untuk menampilkan 3 kolom kalian pakai kode berikut :

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

Catatan :

== Silahkan ganti Kode warna merah dengan ukuran yang kalian kehendaki.
== Untuk membuat lebih dari 3 kolom kalian tinggal memodifikasi kodenya, alias tinggal nambahin kode nya dan membagi ukurannya menjadi 4 kolom.

Mungkin itu saja yang bisa saya berikan pada postingan kali ini, semoga akan sangat bermanfaat buat kalian semua.

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.