Create Three Columns to Blogger Footer Section

Yes, the default Blogger template has only one column footer, but then, you would have noticed that many blogs and websites have  three columns footer. The advantages are that :

    * You will have more space for additional widgets and gadgets.
    * If you position all the bigger gadgets at the footer section, the main content will load faster.

It's a breeze to apply  three columns footer to your Blogger template!

Just follow these 5 simple steps:

Step1.
Go to Layout > Edit HTML . Back-up your existing blog. Check out these tutorials if you are unsure of the procedure.

• Back-up Blogger Blog Completely with Posts + Comments + Gadgets
• Back-up or save your Blogger template

Step2.
Remove all widgets and gadgets from the footer section. You can even drag and drop those widgets from the footer section to the sidebars. You can put it back at the footer after you are done.

Step 3:
First, locate <b:section class='footer' id='footer'/>
Replace the entire line with the following code-

<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>

Preview and Save the template.

Step 4.
Next,you have to add a small code again to hold all the footer columns, so that the widgets don't get pushed beneath each other when you add them later. Go to Edit HTML again and search for </b:skin> tag.
Immediately before </b:skin> tag add the following lines of code:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}
 
Step 5:
Finally, click the  Save Template button to save the whole modified code. 

That’s it! Done! Now, your blog has three columns in the footer section! Have fun adding more widgets to your blog! :)

Like this post? Why don't you subscribe to the free RSS feed?  

Enter your email address:

Delivered by FeedBurner

Read more Entry>>