Add Three Columns in Footer to Blogger

Keeping you sidebars clean makes your blog look good. This is where the role of the columns in footer section comes in. Also it will give your blog a new style. For example, see at the bottom of my blog. This simple tutorial will explain how to do create and add three sidebar columns to footer section in Blogger templates.

1. Go to Design > Edit HTML and first backup your template.


2. Move your gadgets/widgets (if any) from the footer section to your sidebar.


3. Find the closing "]]></b:skin>" tag and immediately before this line, add the following styling definitions and properties:



#footer-left {
width: 33%;
float: left;
margin:5px;
text-align: left;
}
#footer-center {
width: 34%;
float: left;
margin:5px;
text-align: center;
}
#footer-right {
width: 33%;
float: right;
margin:5px;
text-align: right;
}
#footer-column-container {
clear:both;
}
.footer-column {
padding:5px;
}


3. Find the codes:


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>


And replace this section with the below codes to add three widget sections to blogger footer:


<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-left'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer-center'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer-right'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>


5. Preview for any error and save it. Go to Design > Page Elements, you will find out that you have added three columns in Blogger footer section.

Now move and add some of the widgets there and see how it looks.