Cara membuat 2 kolom layout

Cara membuat 2 kolom layout dibawah main wrapper atau dibawah layout postingan sangat berguna buat para bloger untuk tempat berbagai widget khususnya dibidang advertise atau wadah iklan. Buat para bloger strategi menempatkan iklan pada halaman log harus lebih unik dan mudah dilihat para pengunjung agar kesempatan untuk diklik lebih besar. Memang kegunaan kolom layout dibawah postingan ini tidak diwajibkan untuk iklan, tapi dalam postingan kali ini saya mencontohkan widget iklan agar lebih mudah dipahami. Bila anda ingin memasang 2 kolom layout dibawah postingan silahkan simak tutorial dibawah ini dan langsung saja menuju TKP.

Referensi Artikel

• 5 kolom layout di footer halaman blog
• Membuat 4 kolom layout di footer halaman blog
• cara membuat 2 kolom layout di sidebar blog

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda


/*****************************************
Name : 2 kolom layout dibawah postingan
By : Rivai Silaban | Blog Design
Update : 17/08/2013
******************************************/
#BD-bawahmain h2{
font-size:13px;
font-weight:bold;
color:#990000;
border-bottom: dashed #999999 1px;
padding-left:5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-style: italic;
}
#BD-bawahmain{
width:100%;
border:solid #CCCCCC 1px;
background-color: #99FF00;
}/*** Blog Design CSS and ***/



5. Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
6. Coba cari dan perhatikan kode dibawah ini
   
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>..</b:widget>
   </b:section>
   </div>
   
   Kode diatas adalah adalah kode " Posting Blog " ( Blog1 ) dibagian main wrapper kode tersebut dimiliki oleh blog dari blogspot . Misi kita adalah membuat 2 kolom layout dibawah postingan blog.
   
7. Setelah ketemu dan anda perhatikan kode diatas silahkan anda copy kode dibawah ini lalu pastekan tepat diatas kode </div> seperti kode diatas.
   
   


<!-- Rivai Silaban | BLOG DESIGN 2 kolom layout start -->
<div id='BD-bawahmain'>
<div id='BDkiri' style='width: 47%; float: left; margin:4; text-align: left;padding:3px;'>
<b:section class='BD-L' id='BD-left'/>
</div>
<div id='BDkanan' style='width: 47%; float: right; margin:4; text-align: left;padding:3px;'>
<b:section class='BD-R' id='BD-right'/>
</div> </div><!-- Rivai Silaban | BLOG DESIGN 2 kolom layout End -->


8. Setelah anda pastekan diatas kode </div> seperti kode diatas sekarang hasilnya kira kira seperti kode dibawah ini.
   
   
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>..</b:widget>
   </b:section>
   <!-- Rivai Silaban | BLOG DESIGN 2 kolom layout start -->
   <div id='BD-bawahmain'>
   <div id='BDkiri' style='width: 47%; float: left; margin:4; text-align: left;padding:3px;'>
   <b:section class='BD-L' id='BD-left'/>
   </div>
   <div id='BDkanan' style='width: 47%; float: right; margin:4; text-align: left;padding:3px;'>
   <b:section class='BD-R' id='BD-right'/>
   </div> </div><!-- Rivai Silaban | BLOG DESIGN 2 kolom layout End -->
   </div>
9. Perhatikan warna dari kode postingan blog ( Kode warna Hijau ) dan kode warna merah dibawahnya adalah 2 kolom layout kiri dan kanan tepat dibawah postingan blog anda.
10. Setelah semua sudah sempurna anda lihat silahkan anda save template anda, saatnya anda menuu "Tata Letak" ( layout ) untuk melihat hasil 2 kolom layout kiri dan kanan dibawah layout postingan blog anda.