Pasang Widget 2 Kolom Di Bawah Posting

Pertama saya ingin berterima kasih kepada guru Ngeblog yaitu Om KR. Saya dapt pelajaran baru lagi ne buat mempercantik blog.... Pelajran membuat widget dengan dua kolom, menarik bukan,.,.,
Nah sekarang saya akan memberikan tutorialnya yang saya dapat dari Om KR,.
Buat Om KR saya minta ijin membagi ilmunya,.,. Buat sobat yang sudah mau mampir di blog saya.

Nah ga banyak kata saya mulai ja, Sebagai contohnya lihat gambar do bawah ini :



Pertama untuk mengatur tata letaknya yaitu dengan kode CSS. Dengan CSS kita dapat mengatur semua itu, lebar kolom, warna dasar kolom dan yang lainnya. Kolom utama adalah kode .bawahpost kolom kiri .bawahkiri, kolom kanan .bawahkanan. Jadi kode CSS class lihat dibawah ini :

.bawahpost {

}

.bawahkiri {

}

.bawahkanan {

}

Kedua Sobat harus mengetahui berapa ukuran lebar kolom posting, untuk menentukan lebar kolom kiri dan kolom kanan.
Contoh misalkan kolom posting selebar 550px, maka kolom kiri dan kanan tinggal di bagi dua, Sobat juga harus memperhitungkan besarnya padding dan margin, Contoh ukuran lebar lihat kode yang berwarna biru di bawah ini :

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

Selanjutnya kode HTML untuk mengfungsikan CSS tadi. Kata Om KR karena dalam kode tadi yang dipakai adalah tanda titik ( . ) maka ini adalah fungsi class, jadi contoh kode HTML dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='bawahpost'>

<div class='bawahkiri'>

Kode Iklan anda yang ingin ada di sebelah kiri disini

</div>

<div class='bawahkanan'>

Kode Iklan anda yang ingin ada di sebelah kanan disini

</div>

</div>

</b:if>

Nah berikutnya lanhkah untuk memasukan kode-kode tadi:

1. Login ke blogger
2. Klik Tata Letak/Layout
3. Klik Edit HTML
4. Backup dulu sebelum melakukan editting template mengantisipasi jika terjadi kesalahan dengan klik Download Template Lengkap.
5. Klik kotak Expand Widget Template.
6. Carilah kode ]]></b:skin>, Untuk memudahkan tekan ctrl F/ F3, kemudian copy kode di bawah ini persis diatas kode ]]></b:skin>

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

7 Carilah kode berikut :

<data:post.body/>

8. Kemudian copy paste kode di bawah ini persis di bawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='bawahpost'>

<div class='bawahkiri'>

Kode Iklan anda yang ingin ada di sebelah kiri disini

</div>

<div class='bawahkanan'>

Kode Iklan anda yang ingin ada di sebelah kanan disini

</div>

</div>

</b:if>

9. Klik tombol Simpan Template.

Nah sudah selesai, selamat mecobanya Sobat....
Semoga bermanfaat.