Simple Steps to Add a Three Column Footer to Blogger Theme

With a Three Column Footer you can easily display many items in your Blog. Many of the new themes for Blogger have got a three column footer. If your Themes doesn’t have a three column footer then you need not worry. I’ll tell you in some simple steps on how to add a Three Column Footer to your Blogger Theme.

• First thing I would strong say is to backup your current theme. In case if you have got any errors then you can restore your earlier theme. To take a backup of your current theme go to Layout > Edit HTML from your Blogger Dashboard. Now click the “Download Full Template” which is a link present in the “Backup / Restore Template” option. Save your template and start modifying your Theme.

• Now remove all the Widgets present in the Footer section. You can also move the Widgets from Footer to another section also. I personally prefer moving the footer widgets to sidebar.

• Now search your template and find the following code (There may be something in the ID part like “footer” or “footer-block” or something similar to that.

<div id=’footer-wrap’>
<b:section class=’footer’ id=’footer’/>
</div>

• Replace the code with the one present below

<div id=’footer-wrapper-container’>
<div id=’footer1′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer2′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer3′ style=’width: 32%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>
<div style=’clear:both;’/>
<p>
<hr align=’center’ color=’#c2c2c2′ width=’90%’/></p>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px;’>
<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text99′ locked=’false’ title=” type=’Text’/>
</b:section>
</div>
<div style=’clear:both;’/>
</div>

• Now you need to add some styling to your Footer Section

#footer-wrapper-container {
clear:both;
}
.footer-col {
padding: 10px;
}

If you had successfully followed all the steps then you will have a beautiful Three Column Footer in your Blog.
If you face any problems then feel free to contact me.. I’ll be ready to help you…

Follow @pyblogger

Share This Post.....

Subscribe via Email :