2. Langsung ke Tata Letak - design / rancangan - Edit HTML
3. Cari kode berikut ]]></b:skin>
4. Letakkan kode di bawah ini, di atas ]]></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; } |
Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini
#main-wrapper { width: 410px; |
Nah ukuranya adalah yang tercetak tebal diatas. Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan. Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini
<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> |
Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas. Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau
<div id='underpost'> <b:section class='underleft' id='underleft'/> <b:section class='underright' id='underright'/> </div> |
Sehingga kurang lebih codenya menjadi seperti
2 kolom 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> |
2 kolom 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> |
Klik Save Template (Simpan)... SELESAI.
Sumber : http://creatingwebsite-maskolis.blogspot.com/2011/03/menambah-kolom-diatas-dan-dibawah.html
--- oOo ---
