Cara Menambah Dua Kolom/Elemen di Bawah Header





Tutorial kali ini kembali kita akan belajar dsain template, sebelumnya saya pernah membahas tentang "Menambah Elemen Halaman Widget di Bawah Header" Nah sekarang kita akan belajar tentang Cara Menambah Dua Kolom/Elemen di Bawah Header menjadi dua kolom. Hal ini hanya semata untuk menyediakan tempat Widget/Aksesoris di tempat kita apalagi template sobat yang fasilitasnya tidak memadai.

Baik kalau para sobat (pemula) yang belum paham apa yang akan kita bahas kali ini lihat gambar seperti dibawa ini :



Caranya sangat mudah, dan simpel tinggal sobat ikuti langkah - langkah berikut ini :

1. Seperti biasa Log In 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!

3. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode berikut tepat diatasnya :

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

4. Selanjutnya simpan Template dan lihat hasilnya di bagian elemen halaman, jika sobat berhasil maka akan melihat ambah gadget 2 di bawah header seperti pada gambar di atas.




Anda sedang membaca artikel tentang Cara Menambah Dua Kolom/Elemen di Bawah Header dan anda bisa menemukan artikel Cara Menambah Dua Kolom/Elemen di Bawah Header ini dengan url http://tutorial-blogs.blogspot.com/2011/04/cara-menambah-dua-kolomelemen-di-bawah.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Menambah Dua Kolom/Elemen di Bawah Header ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Menambah Dua Kolom/Elemen di Bawah Header sebagai sumbernya.

Related Stories Widget by LinkWithin