Senin, 28 Maret 2011

Cara Menambah 2 atau 3 kolom dibawah header

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
  1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

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

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

2. Kemudian cari kode<div id='main-wrapper'>setelah dapat letakkan kode beikut diatasnya (untuk dua
    kolom dibawah header): 



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


Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode


<div id='box-main-container'></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;'/>




3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti
    screenshot diatas.

Apabila hasil kolom yang baru berada di atas posting atau dengan kata lain tidak sesuai harapan coba cyber mania taruh code diatas tadi di bawah code


<div id='content-wrapper'&gt
dan lihat lagi hasilnya.

= = = = = = = = = = = = = Selamat Mencoba= = = = = = = = = = = = = =

Tidak ada komentar:

Posting Komentar