Dalam kesempatan kali ini kita akan coba membahas tentang bagaimana membagi dua kolom di bawah atau di atas Post Body pada Blogspot kita. Anda dapat melihat gambar disamping bila masih bingung, tuh kliatan kan..?

Ok Siap ya kita akan mulai membahas bagai mana Menambah 2 Kolom Untuk Widget di bagian bawah atau di atas Post Body Blog Kita.

Ok Siap Ya..?
Pertama Log In Ke Blogger Account Anda, Klik Dashboard dan Aktifkan Layout dan Pilih Edit HTML, Jangan Lupa beri tanda Checklist pada Expand Widget Templates.

Perhatian : Untuk Menghindari Kesalahan yang Fatal Alangkah Lebih Baiknya Blog Anda Di Backup Terlebih Dahulu dengan Cara Mengklik Link Download Full Template

Selanjutnya Cari tag berikut-> :
]]></b:skin>

Apa bila susah cari dengan mengunakan Find, dengan cara tenkan Ctrl + F (kalau anda menggunakan Mozilla Firefox, anda perhatikan bagian bawah dari browsing anda ada gambar sbb:
Ketik didalam kotak Find kode tag yang mau di cari.

setelah kode ketemu copykan kode dibawah ini di atas kode ]]></b:skin> , Ini kodenya.

/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:530px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Rubahlah Sesuai dengan lebar Post Body blog anda pada Text yang di beri warna merah. Apabila anda tidak tau lebar Post Body Blog anda Coba Anda cari Kode Tag berikut :

#main-wrapper {
width: 430px;

Nilai yang terdapat pada Width adalah nilai lebar Post Body Blog Anda, Masukan Nilai tersebut pada Width pada tag yang di beri warna merah tadi.

Nah selanjutnya untuk membagi dua kolom anda perhatikan Kode Tag yang di beri warna Biru. Nah untuk membagi kolom nya menggunakan acuan lebar Post Body pada blog kita Misal Lebar Post Body kita adalah 430 maka leabar masing-masing kolom adalah 210 bila kita jumlahkan Nilainya baru 420 nah yang 10 adalah untuk Jarak Antar Kolom nya. Atau anda dapat mengkombinasikan nilai tersebut sesuai dengan keinginan kita tapi yang perlu kita ingat adalah menyisakan Nilai untuk Margin atau Jarak antar kolomnya.

Apabila Langkah di atas telah selesai maka kita lanjutkan ke langkah berikutnya, yaitu cari Code Tag berikut :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Apabila Anda ingin menambahkan Kolom di Bawah Post Body maka Anda copy Tag Code dibawah ini di bawah kode yang diberi warna biru dan di Atas Tag Code </div>

Apabila Anda ingin menambahkan Kolom di Atas Post Body maka Anda copy Tag Code dibawah ini di Atas kode yang diberi warna biru dan di Bawah Tag Code <div id='main-wrapper'>.

Ini Tag Code yang dimaksud.

<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

Kurang Lebih Seperti Ini bila kita lihat struktur Tag Code nya

Di Bawah Post Body :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>
</div>

Jika di Atas Post Body :

<div id='main-wrapper'>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Setelah itu Jangan Lupa kita Simpan atau Save.

Setelah itu Perhatikan pada Page Element pada Blog Anda Jika berhasil akan ada tambahan 2 Kolom di atas atau di Bawah Post Body pada Blog Anda

Selamat Mencoba ya..