How to make 2 or 3 until 5 column under the header template

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

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

1. Login 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. Find this code : ]]></b:skin>
(Press Ctrl+F)

3. Copy and Paste the code (blue color) below before code (red color) above:

<!-- New 2 Column Below Header -->
#colb-main-contain {
clear:both;
}

.colb-column {
padding:0px 5px 5px 5px;
border:1px dotted $bordercolor;
}

4. Save Template.

5. Then find the code <div id='main-wrapper'>, paste the code (blue color) below before code (red color) above.

For 2 column.

<div id='colb-main-contain'>
<div id='colb1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr1' preferred='yes' style='float:left;'>
</div>

<div id='colb2' style='width: 70%; float: right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr2' preferred='yes' style='float:right;'>
</div>

<div style='clear:both;'/>
</div>

Then SAVE. Finally you have 2 column under the header.

6. Tips for the adjusment to meet your needs :
(a) padding:0px 5px 5px 5px; => Top Margin, Right, Bottom and Left margin.
(b) style='width: 30% => you can change the percentage number from 10 to 90% note the width of your Header Wrapper

If you want to add more than 2 column, here the code. Just follow the step 1, 2, 3 and 4, when the phase 5 just enter this code below.

For 3 column.

<div id='colb-main-contain'> <div id='colb1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr1' preferred='yes' style='float:left;'/>
</div>
<div id='colb2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr2' preferred='yes' style='float:left;'/>
</div>
<div id='colb3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

For 4 column.

<div id='colb-main-contain'>
<div id='colb1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr1' preferred='yes' style='float:left;'/>
</div>
<div id='colb2' style='width: 25%; float:left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr2' preferred='yes' style='float:left;'/>
</div>
<div id='colb3' style='width: 25%; float:left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr3' preferred='yes' style='float:left;'/>
</div>
<div id='colb4' style='width: 25%; float:right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/> </div>

For 5 column.

<div id='colb-main-contain'>
<div id='colb1' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr1' preferred='yes' style='float:left;'/>
</div>
<div id='colb2' style='width: 20%; float:left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr2' preferred='yes' style='float:left;'/>
</div>
<div id='colb3' style='width: 20%; float:left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr3' preferred='yes' style='float:left;'/>
</div>
<div id='colb4' style='width: 20%; float:right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr4' preferred='yes' style='float:right;'/>
</div>
<div id='colb5' style='width: 20%; float:right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr5' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

All depends on what you want.
Hopefully useful.