cara membuat 2 kolom layout di bawah postingan blog

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.

Kesimpulan

Membuat 2 kolom layout di bawah widget postingan halaman blog akan menambah kreativ dan inofasi anda pada halaman blog kesayangan anda untuk lebih leluasa memasang berbagai widget untuk menunjang kinerja halaman blog anda.

Silahkan anda edit CSSny untuk lebih kreative lagi agar sesuai dengan thems halaman blog kesayangan anda. Bila anda merasa kesulitan untuk memasang 2 kolom layout dibawah postingan blog ini silahkan anda hubungi saya atau silahkan anda gunakan form komentar dibawah postingan ini untuk share bersama saya, saya akan membantu anda dengan senang hati.

Membuat 2 kolom layout dibawh postingan blog
17 Agustus 2013
Admin Rivai Silaban

MERDEKA !!! MERDEKA !!! MERDEKA !!!

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 4:13 PM