Membuat kolom di bawah postingan

Membuat kolom di bawah postinganBeberapa template hanya menampilkan sedikit sekali kolom, tentu nya kalian ingin menambahkan atau mengatur letak kolom di blog anda, agar terlihat lebih menarik.. ^^

Untuk membuat kolom sendiri di blogger kamu, kamu bisa mengikuti petunjuk di bwh ini.. slamat mencoba

langkahnya sebagai berikut :

Taruh Code CSS dibawah ini diatas Code ]]></b:skin>

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}


#box-main-container1 {
clear:both;
}
.box-column1 {
padding:5px 10px 5px 10px;
border:1px dotted $bordercolor;
}

padding dan bordernya anda sesuaikan dengan milik anda sendiri ....

kedua cari kode dibawah ini :


<div id='main'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-->


Ketiga terus masukan kode dibawah ini :

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML3' locked='false' title='test1' type='HTML'/>
</b:section>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>




memasukannya mau diatas atau dibawah kode :

<div id='main'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-->

itu tergantung anda selera sendiri ...

<div id='main'>
<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML3' locked='false' title='test1' type='HTML'/>
</b:section>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-->

atau :

<div id='main'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML3' locked='false' title='test1' type='HTML'/>
</b:section>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-->



atau :

<div id='main'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-->

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML3' locked='false' title='test1' type='HTML'/>
</b:section>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


dengan meletakkan di tempat yang berbeda akan memberikan efek yang berbeda pula…^^…
untuk lebih jelas bisa hub saya.^^..thx