Selamat Datang di InginTauSaja ~ Tempat Untuk Mencari Tau

Membuat 2 atau 3 Column Widget





Ikuti langkah-langkah berikut:



Cara menembahkan dua atau tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Template=> 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.



Tweets
Comments
 
 
 

Dapatkan update terbaru kami, klik suka / like dibawah

Followers