Menambah 3 Kolom/Elemen Halaman Widget di Bawah Header

Published by Kang Fathur Monday, November 15, 2010

Lagi lagi sore ini kita akan membahas tentang Dsain Blog, tidak ada habis habisnya ya tutorial hehehe, karena demi teman yang baru gabung di dunia blogger alias yang masih awam seperti saya, makanya gak mao henti henti untuk memberikan tips dan trik kepada sobat semua. sama seperti saya kalau punya keinginan pingin cepat terkabulkan, disinilah saya akan mengabulkan keinginan-keinginan sobat, karena dulu perna salah satu sahabat saya minta di postingkan cara Nambah Elemen Halam,an Widget di bawah Header.

Sebelumnya saya pernah posting cara menambah Dua Kolom/Elemen Widget di Bawah Header, sekarang saya tambah lagi satu elemen. jadi judulnyapun menjadi Menambah 3 Kolom/Elemen Halaman Widget di Bawah Header.

Baik saya tidak akan panjang lebar lagi ngomongnya hehe, kita langsung aja ke TKP, di bawah ini gambar tampilan yang kita bahas sekarang ini :



Caranya sangat mudah dansimpel saya yakin bagi pemula juga pasti bisa OK. berikut langkah langkahnya :

1. Seperti biasa Login dulu ke blog sobat
2. 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

<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 dibagian elemen halaman, jika berhasil sobat akan melihat seperti gambar diatas.

Gampang dan Simpel Khaaann??

Se;amat Mencoba semoga berhasil dan mudah mudahan tips ini bermanfaat di hati sobat Amiin..

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI