Make 2 or 3 until 5 column under the header template

For a friend like you want to embellish or beautify his blog with many widgets, here are my tips one that I can from Mochal namely add 2 or 3 until column under the header of my blog will be added around beautiful and added quality.

For the comrade who do not know, it is still curious, how to add these tips to the blog comrade.



Let's start follow the steps quickly and easily add to these tips into templalte comrade:

1. After comrade into Blogspot and then go to the page layout and edit the HTML
Do not forget to save the template information, click the "Download Full Template"

2. After looking around this code ]]></b:skin>

3 If the facts enter the code below at the top of the code:

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

Save the work of comrade

3. Then find the code <div id='main-wrapper'>, after enter the code below at the top of the code.

For 2 coloum

<div id='box-main-container'>
<div id='box1' style='width: 50%; 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: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Save again the work of comrade

4. After saving, and then around to the layout and see the results.

Code in phase 3, when the modifications comrade may want to add 3 column under the header of the note is in need widht with floatnya!

But if the comrade is confused Mochal provide the code to add 3 column under the header, please follow the steps 1 and 2 when the phase 3 and then enter this code

For 3 coloum

<div id='box-main-container'>
<div id='box1' style='width: 33%; 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: 34%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 33%; 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>

For 4 coloum

<div id='box-main-container'>
<div id='box1' style='width: 25%; 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: 25%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div id='box4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Fior 5 coloum

<div id='box-main-container'>
<div id='box1' style='width: 20%; 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: 20%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='box4' style='width: 20%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col5' preferred='yes' style='float:right;'/>
</div>
<div id='box5' style='width: 20%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col5' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

All depends on the needs of comrade in the add widget

Hopefully useful and happy blogging

Related Posts by Categories