Sabtu, 13 Februari 2010

Membuat 2 Atau 3 Kolom Dibawah Header

Posted by Dennis Rvindo 11.25, under | No comments

Membuat 2 Atau 3 Kolom Dibawah Header
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.

0 komentar:

Posting Komentar

Setiap komentarmu akan sangat berarti sekali buat blog ini agar bisa menjadi lebih baik untuk kedepannya, trima kasih udh berkomentar di blog ini..

Tags

Music on

Blog Archive

Sponsor