Ide@Pelajar

cara membuat 2 kolom layout (elemen) di bawah postingan blog

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
******************************************/
#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>
   <!-- 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><!-- 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.

Author: Abufajri

Penulis Blog Kelas Pemula Tea. Read More →