Membuat dua element dibawah header

Menambah dua element dibawah header mungkin salah satu cara untuk menambah tempat untuk meletakkan gadget2 kamu,tapi terkadang template yang kita suka tidak ada 2 kolom ini,tapi kamu gak usah kawatir,ka,u bisa menambahkanya sendiri,sebelumya saya telah mempelajari tentang tuturial ini dan mempraktekkanya sendiri,hasilnya lumayan juga,tapi ada sebagian tidak memuaskan saya yakni judul elementnya tidak sesuai yang saya inginkan,makanya saya mencoba menambahkan sedikit css-nya,lihat gambar dibawah ini,ni gambar pinjaman he he..,

Itulah yang sayamaksud dengan kolomnya, pengen menambahkan pada blog kamu?ikuti langkah2 berikut!

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’> setelah dapat letakkan kode beikut 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>

---

---

3. Simpan template dan lihat hasilnya.

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: