MEMBUAT DUA KOLOM DI ATAS / BAWAH POSTINGAN

Pada postingan terdahulu sudah kita bahas cara membuat kolom di atas / bawah postingan.Untuk melengkapi panduan merubah template pada bagian post body , mari kita bersama-sama pelajari cara membuat dua kolom di atas / bawah post body.

1.Masuk Blogger dengan ID anda.
2.Klik Tata Letak
3.Klik Edit HTML
4.Untuk menghindari hal yang tidak kita inginkan sebaiknya Download Lengkap Template.
5.Cari kode seperti ini : ]]></b:skin>
6.Letakkan kode di bawah ini di atas kode ]]></b:skin>

/*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; }

Sesuaikan angka merah dengan lebar kolom postingan template anda.
7.Sekarang kita pasang kode HTML untuk memanggil Kode CSS di atas,cari kode seperti di bawah :

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

8.A.Untuk dua kolom di atas postingan tambahkan kode berikut di atas kode warna merah :

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

sehingga kode menjadi :

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

8.B.Untuk dua kolom di bawah postingan tambahkan kode yang berwarna biru  di bawah kode warna merah sehingga kode menjadi :

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

9.Simpan .

Semoga berhasil..
Monggo Berkomentar...!