Ilustration By:Bahtiar.AS |
1. Login Ke Blogger.com
2. Kemudian Masuk Ke Tab Tata Letak/Rancangan
3. Dan Masuk lagi ke Edit HTML
4. Centang Expand Widget
5. Copas kode berikut diatas kode ]]></b:skin>
5. Copas kode berikut diatas kode ]]></b:skin>
#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
- Bagi anda yang ingin Memasang 2 Kolom Dibawah Header Silahkan Copas kode berikut 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>
<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>
- Bagi anda yang ingin Memasang 3 Kolom Dibawah Header Silahkan Copas kode berikut diatas kode <div id='main-wrapper'>
<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>
<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>
Dan yang Terakhir jangan Lupa Disimpan
HASIL DARI 3 KOLOM
3 Kolom Di blog KangTiar |
Semoga Artikel Tutorial Cara Menambah Dua Sampai Tiga Kolom Di Bawah Header Di blog Dapat Bermanfaat Bagi Kita Semua.[KangTiar]
sangat bermanfaat
BalasHapusmakasih tutorialnya.
wah aku gak mau banyak banyak dulu :D
BalasHapusoh begono cranya bikin 3 kolom langsung di bwh header
BalasHapuscongcot juga agak susah nich bikin kotak pake css trus pake div lagi
BalasHapusmakasich infonya
salam kenal
congcot
apa gag tambah berat ya blognya?
BalasHapusartikel bagus untuk nambah Kotak tapi gak berat gak?
BalasHapusseip dah , tak simpen ,, siapa tau butuh di lain waktu
BalasHapusnice info,,di tampung dulu ah..
BalasHapusSeep banget triknya kang... keep blogging!
BalasHapusbagus ni? tp kok ip adress di sm bersamaku di banned ya bs bntuin ga ni?
BalasHapusdicoba bro..
BalasHapusmenarik nie sepertinya..
Sip kang.., ane bookmark ne artikel yach.. ? :)) sukses kang.., salam kenal
BalasHapusaku mau mencoba, tapi sering eror...
BalasHapusklo mau menambahkan kolom sponsor gmn ya
BalasHapussipppppp
BalasHapus