Cara Mudah Buat 2 Kolom Laoyat di Bawah Post Blog

GUBHUG REYOTT™ |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.


Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin> 
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

CODE CSS

/*****************************************
Name : 2 kolom layout dibawah postingan
By : Jokorowotlogorejo | Blog Sharing Dan Informasi / Membuka Cendela Cakrawala Berfikir
Update : 21/02/2014
******************************************/
#L3333XS-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;
}
#L3333XS-bawahmain{
width:100%;
border:solid #CCCCCC 1px;
background-color: #99FF00;
}/*** L3333XS CSS and ***/

Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
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.
Setelah ketemu dan anda perhatikan kode diatas silahkan anda copy kode dibawah ini lalu pastekan tepat diatas kode </div> seperti kode diatas.

CODE HTML

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

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><!-- L3333XS | 2 kolom layout start --><div id='L3333XS-bawahmain'><div id='BDkiri' style='width: 47%; float: left; margin:4; text-align: left;padding:3px;'> <b:section class='L3333XS-L' id='L3333XS-left'/></div><div id='BDkanan' style='width: 47%; float: right; margin:4; text-align: left;padding:3px;'><b:section class='L3333XS-R' id='L3333XS-right'/></div> </div><!-- L3333XS |  2 kolom layout End --></div>

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