Membuat 3 kolom element dibawah header

kadang blogger menginginkanya 3kolom dibawah header, biar ada yang ditengah katanya,emang enak ya kalo ada yang tengah2, he he…eh jangan ngeres loh..ha ha ha..dah ah malah nglantur,
tutorial tentang bagaimana cara membuat 3 kolom element 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;

}



2. Kemudian cari kode <div id=’main-wrapper’> setelah dapat letakkan kode beikut diatasnya :



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



3. Simpan template dan lihat hasilnya, jika sukses maka akan ada 3element lagi dibawah header kamu seperti gambar dibawah ini:

3 element

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: