- 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.
- Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
- Cari code <div class='main-wrapper'> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <div class='main-wrapper'>.
- Save template anda, dan lihat hasilnya
/*****************************************
Name : 4 Kolom layout diatas main blog
By : mismanpbg
Update : jum at 31 januari 2014
******************************************/
#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 */
Name : 4 Kolom layout diatas main blog
By : mismanpbg
Update : jum at 31 januari 2014
******************************************/
#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 */
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 ).
<!-- 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 != ""'>
<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 != ""'>
<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 != ""'>
<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 != ""'>
<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 -->
<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 != ""'>
<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 != ""'>
<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 != ""'>
<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 != ""'>
<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 -->