Easy Way to add three columns for Blogger footer section

Saturday, September 25, 2010

How to add three columns to blogger footer section ?

Actually Adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design.
There are only four main steps to this tutorial, and all the overall process is quite simple. this footer hack is specially for blogs that have different  widths and styles, and so bloggerbuster has designed a fluid solution which should work in any Blogger layouts template.

Creating the footer new columns

Back up your existing blog template! Before making any modifications to your blog template!
To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.

Add extra code to your footer section.

Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).
Now you need to find this section in your template:

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

all we need to change is the line highlighted in orange .
Replace the entire line highlighted in red with the code below:

<div id='footer-column-container'>

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

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

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

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

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

</div>

here is a good idea to save your template at this stage


-Adding style for the new footer section


Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "</b:skin>" tag, which is where the style section of your template ends.


Immediately before this line, add the following lines of code:

#footer-column-container {

clear:both;


}


.footer-column {

padding: 10px;


}

Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!


Amanda added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in orange) with a different color:

<hr align='center' color='#5d5d54' width='90%'/>

I thank Amanda for this tutorial enables us to customize the footer section with ease, so we can add more widgets and content to this area of our blog template !