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!! Monkey Icon ).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??Monkey Winks
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 Monkey Icons Yoyo.

Kita akan berjumpa lagi dengan artikel ngelantur yang lebih maknyoss lagi di blog ini.
u comment i follow
Bookmark and Share
Dapatkan Artikel terbaru dari blog ini, langsung ke e-mail anda dengan berlangganan disini.

Enter your email address:

Delivered by FeedBurner

Powered by FeedBurner

Sudah Baca Yang Ini ?



Comments :

12 comments to “Membuat 2 Atau 3 Kolom Dibawah Header”

Aditya's Blogsphere mengatakan...
on 

menarik sekali.....sayangnya blog q udah berat jd ga brani nambah elemen lg hehe....maap lum bisa masang awardnya yah...tunggu aj ntar....

alfarolamablawa mengatakan...
on 

OKE OKE OKE,,,
praktek ah..tapi kalo ga jadi ga papa yah Mas hehehe
peace...

Rizky Punya Gawe mengatakan...
on 

mantab nih sob, nanti rizky coba deh

oy sekedar info aja, rewiew yang rizky adakan g ada siapa yg menang cuma kalau ingin dapat itu software syaratnya cuma review blognya rizky sesuai yang telah rizky sebutkan, kalau dah selesai tinggal konfirmasi rizky software akan langsung rizky kirim ke email sobat rehat, gimana mudahkan, softwarenya gratissssssss g pk bayar

Fais cWaKep mengatakan...
on 

manatab ni zob tutornya..

Indahnya Berbagi mengatakan...
on 

kmrn2 anaa coba praktekin tutorial dibeberapa blog dgn trik berbeda trmasuk g' sm jg ma trik sobat nie.

trik sobat kayaknya simple, anaa coba ya, klu berhasil boleh ya share ketmn2?

oya awardx dikumpul dl ya. biar sekalian diposting dgn award dr yg lain?

Indahnya Berbagi mengatakan...
on 

terimakasih. berhasil.

Ipin's cool mengatakan...
on 

sipp gan kao buat di footer ada gak yahhh..???

Indahnya Berbagi mengatakan...
on 

balik lagi, kok g' bisa tiga kolom? float left dikode sobat kok dua? apa g' keliru tu? atau anaa yg kurang teliti?

ta coba lg dl ya?

Admin mengatakan...
on 

berhasil. terimakasih. anaa share ya, tapi anaa modifikasi lagi kodenya (bentuk borderx dllx) biar kretif dikit dan g' copas abis khn?

makasih ya!

Rahad 2 Six mengatakan...
on 

Jawaban :

Indahnya Berbagi > bisa kok.Kalo masalah float left nya 2 emang begitu strukturnya.Buat float left yang posisinya di tengah bisa diganti jadi right,jadinya kolomnya nempel sama kolom right.Kalo left,nempelnya sama kolom left

ipin's cool > ada kok,tunggu aja terbitannya yg membuat 3 kolom di footer.Atau kalo ngerti sama kode HTML bisa ngedit2 sendiri...

admin > boleh...kalo mw diganti silakan,kalo gak diganti juga gak apa2...bebas kok..

gak mutu mengatakan...
on 

menarik juga tipsnya ....
percobaannya ntar aja kalo kondisi dah memungkinkan ....

cahyo wicaksono anak net mengatakan...
on 

thank banget infonya dari kemaren nyari akhirnya ketemu thank ya thank

Posting Komentar

Blog ini DoFollow.
Jadi silahkan berkomentar disini.

Yang penting komentar bukan Spam,Porno,maupuun berunsur SARA.Jika ada yang seperti itu akan langsung dihapus.


Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Friends

 

Copyright © 2009 by Rahad 2 Six