Adding Column under Blogspot Header

Posted by Obay Tutorial at 8:35 AM

On this overcast morning that I will give a tutorial on how to add a column under the header blog. If you think you add a column under the header to make our blog look crowded, just plug in the bottom of the post or at the top of the footer. Well, just in the heart of the matter

Add 1 Column under the Header

In general, under the column header is used to attach a picture, navbar, text, or friend would like to put the photos of the most narcissistic friend lol.
Steps - steps that you need to consider is :

• Login to your blogger
• Click the Layout
• Choose Edit HTML
• Before you start typing how good you backup all the data first, how to select the Download Full Template.
• Search Code ]]></b:skin> to make it easier you can press Ctrl + F, and then paste the code in column find.
• Paste the following code above the code ]]></b:skin>

#satu_kolom{
margin:10px 0;
padding:1%;
width:98%;
}

• Copy the following code

<div id="satu_kolom">
<b:section class='header' id='satukolomajah' preferred='yes'/>
</div>

• Paste this code below

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

</b:section>
</div>

• Save the template
• View the changes on the layout

Add 2 Column Under Header

Previously I've explained how to add widgets below the column header, this time I will explain a little about how to add two columns header widget below ...

• Login to your blogger
• Click the Layout
• Choose Edit HTML
• Before you start typing how good you backup all the data first, how to select the Download Full Template.
• Search Code ]]></b:skin> to make it easier you can press Ctrl + F, and then paste the code in column find.
• Paste the following code above the code ]]></b:skin

#dua-kolom-dibawah-header {
clear:both;
}
.dua-kolom {
}

• Copy the following code

</div>

<div id='dua-kolom-dibawah-header'>

<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>

</div>

<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>

<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>

</div>

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

• Paste the above code

<div id='main-wrapper'>

• Save the template
• View the change on the layout

 Adding 3 Under Column Header

Previously I've explained how to add widgets below the column header, this time I will explain a little about how to add three columns header widget below ...

• Login to your blogger
• Click the Layout
• Choose Edit HTML
• Before you start typing how good you backup all the data first, how to select the Download Full Template.
• Search Code ]]></b:skin> to make it easier you can press Ctrl + F, and then paste the code in column find.
• Paste the following code above the code ]]></b:skin

#tiga-kolom-dibawah-header {
clear:both;
}
.tiga-kolom {
}

• Copy the following code

<div id='tiga-kolom-dibawah-header'>

<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom1' preferred='yes' style='float:left;'/>

</div>

<div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom2' preferred='yes' style='float:center;'/>

</div>

<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom3' preferred='yes' style='float:right;'/>

</div>

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

• Paste the above code

<div id='main-wrapper'>

• Save the template
• View the change on the layout

 Note :
If you initially follow from making two columns under the header, (only for the follow of how to create two columns below the header) you just replace the following code:
 </div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div> 
Become
</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:center;'/>
</div>
<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div >

* place remains the same over the code (not added but be replaced)
<div id='main-wrapper'>

That was just a little tutorial from me, for my friends who have a better way, I'd really given out. May be useful.