Membuat 2 Atau 3 Kolom Dibawah Header

Ditengah hujan badai yang sedang menerjang kota.....saya sedang duduk termenung sendiri memikirkan masa depan bangsa indonesia khususnya para generasi muda.....semoga para generasi muda semangat sepertiku.Itulah sepenggal puisi gak jelas ciptaan ku.Sepertinya aku sok puitis ya,tulisan masih amburadul aja sok-sokan bikin puisi.

Sudahlah,hal itu jangan dibahas lagi karena kita akan kembali mengutak-atik kode HTML.Jika udah lumayan ngerti,pasti gak kebingungan deh (iyalah!! ).Oke deh sekarang aku akan memberikan tutorial untuk membuat 2 atau 3 kolom dibawah header.Kemaren aku udah ngasi tutorial untuk membuat kolom di bawah header.Bedanya apa?ya beda lah!!! masak 1 kolom sama 2 atau 3 kolom sama??
Okeh,let's go dimari......

1. Login dulu ke blogger kayak biasanya
2. Masuk ke layout trus Edit HTML.Download dulu deh kalo hasilnya amburadul.
3. Masukan kode dibawah ini diatas kode ]]></b:skin> 

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

4. Di save dulu,abis tu lanjutin lagi deh.
5. Masukan kode di bawah ini di atas 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>

6. Di save deh.Selesai
7. Coba liat di layoutnya.

Kalo mau supaya 3 kolom juga bisa kok.Caranya tinggal menambah memodifikasi kode warna merah .Supaya lebih gampang,Aku kasi aja langsung kode buat menjadi 3 kolom.Hapus dulu kode warna merah dan ganti menjadi kode dibawah ini :

<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 : Yang penting perhatikan saja float sama width nya.Harus pas sama lebar blog.Biar lebih gampang,ganti aja kode yang persen menjadi pixel untuk dipaskan dengan lebar blog.

Catatan 2 : Kalo udah pasang elemen di bawah header,trus pengen supaya 3 kolomnya di bawah elemen tadi.Tinggal dipindah aja kodenya.Kode elemen di bawah header taruh diatasnya kode 3 kolom.

Mudah dan gampang kan buatnya??Kalo ada kesulitan boleh nanya dengan memberikan komentar.Insyaallah aku bisa menjawabnya dengan lancar dan penuh hakikat .

Kita akan berjumpa lagi dengan artikel ngelantur yang lebih maknyoss lagi di blog ini.

Dapatkan Artikel terbaru dari blog ini, langsung ke e-mail anda dengan berlangganan disini.

Enter your email address:

Delivered by FeedBurner

Sudah Baca Yang Ini ?