Belajar Askep
.

Sunday, April 22, 2012

Browse » Home » » Cara Menambah 2 atau 3 kolom diatas / di bawah header

Cara Menambah 2 atau 3 kolom diatas / di bawah header

Bagikan Keteman Lewat:



Cara Menambah 2 atau 3 kolom dibawah header


Caranya sangat mudah, ikuti langkah-langkah berikut:

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

[jika tidak bisa cari yang ini:
<div id=’outer-wrapper’>
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’NAMA BLOG ANDA’ type=’Header’/>
</b:section>
</div>
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..

Semoga bermanfaat.

Posted By Belajar Askep
Jangan Asal CoPas!!! baca aturannya Disini
Thank You So Much!
Kalau sudah membaca silahkan isi Buku Tamu
Terima kasih telah membaca artikel: Cara Menambah 2 atau 3 kolom diatas / di bawah header Silahkan baca artikel Blog ©Belajar Askep Lainya Dibawah ini:
Advertisement below...!

Comments : Ada 0 komentar untuk Cara Menambah 2 atau 3 kolom diatas / di bawah header

Post a Comment

 
© Copyright 2011 : Belajar Askep
All Rights Reserved | About | Privacy | Contact | T O S | Sitemap | Stylished by Ahmad Soleh Powered By Blogger
^_^ Submit | Template dari : Free Blogger Templates | Member Area | Report | Report | Log In | Log Out
Ping your blog, website, or RSS feed for Free | |