cara membuat 4 kolom layout di atas postingan blog

Kolom layout atau gadget merupakan tempat berbagai widget blog, cara membuat 4 kolom layout di atas main blog merupakan suatu trik jitu buat para bloger mania yang memiliki fitur atau aplikasi yang bayak yang akan ditempatkan dihalaman blognya. 4 kolom layout diatas main blog postingan dapat anda manfaatkan untuk berbagai fitur agar tampilan halaman blog anda menjadi lebih rapi dan elegan bila mana widget yang anda pasang tersusun rapi, an memiliki banyak aplikasi untuk menukung halaman blog ataupun artikel yang telah anda posting. Oke langsung saja menuju TKP , lihat screen shotnya pada gambar dibawah ini sekalian simak cara memasangnya.

Referensi Artikel

• Cara membuat 2 kolom layout dibawah postingan blog
• 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 : 4 Kolom layout diatas main blog
By : Rivai Silaban | Blog Design
Update : Minggu, 22 September 2013
******************************************/
#BDRSLAYOUT-MAINKOLOM {
width: 99%;/* Lebar */
margin:0;
padding: 0;
text-align: center;
}
#BDRSLAYOUT-MAINKOLOM .BDKOLOM{
width:140px; /* Lebar Kolom */
height:auto;
margin:3px ;
text-align: center;
padding:2px 5px;
line-height: normal;
}/* End CSS 4 kolom layout */




5. Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.




Pada umumnya kode <div class='main-wrapper'> biasanya ada pada template HTML/XML blog tapi ada beberapa blog mungkin tidak memiliki kode persis seperti kode <div class='main-wrapper'>.

Tapi anda tidak perlu kawatir tentang kode <div class='main-wrapper'>, bila di template blog anda tidak sama persis dengan kode tersebut cari saja kode yang sejenis yang penting letak 4 kolom layout ini diatas kode postingan halaman blog ( Widget Blog 1 ).



6. Cari code <div class='main-wrapper'> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <div class='main-wrapper'>.
   


<!-- BDRS layout 4 kolom Start -->
<div id='BDRSLAYOUT-MAINKOLOM'>
<!-- BDRS layout 1 -->
<div id='box1' style='width:140px;float:left;margin:3px 5px; '>
<b:section class='BDKOLOM' id='main-column-1' preferred='yes'>
<b:widget id='HTML71' locked='false' title='Kolom 1' type='HTML'>
<b:includable id='main'>
<!-- BDRS only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!-- BDRS layout 2 -->
<div id='box2' style='width:140px;float:left;margin:3px 5px;'>
<b:section class='BDKOLOM' id='main-column-2' preferred='yes'>
<b:widget id='HTML72' locked='false' title='Kolom 2' type='HTML'>
<b:includable id='main'>
<!-- BDRS only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!-- BDRS layout 3 -->
<div id='box3' style='width:140px;float:left;margin:3px 5px;'>
<b:section class='BDKOLOM' id='main-column-3' preferred='yes'>
<b:widget id='HTML73' locked='false' title='Kolom 3' type='HTML'>
<b:includable id='main'>
<!-- BDRS only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!-- BDRS layout 4 -->
<div id='box4' style='width:140px;float:left;margin:3px 5px;'>
<b:section class='BDKOLOM' id='main-column-4' preferred='yes'>
<b:widget id='HTML74' locked='false' title='Kolom 4' type='HTML'>
<b:includable id='main'>
<!-- BDRS only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<!-- BDRS layout 4 kolom end -->



7. Save template anda, dan lihat hasilnya

Kesimpulan

4 kolom layout diatas Main blog atau diatas halaman postingan blog, dapat anda manfaatkan untuk berbagai keperluan widget blog atau tempat berbagai aplikasi untuk mendukung fasilitas halaman blog anda.

Bila anda mengalami kesulitan dalam memasang kodenya di halaman blog anda atau ada kode yang error silahkan hubungi saya atau share bersama saya melalui form Comment dibawah.

4 Kolom layout diatas postingan blog
Minggu, 22 September 2013
Rivai Silaban | Blog Design

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 : 9:53 AM