How to add three columns to footer

You may have noticed a three column footer in many popular blogs.This is quite common these days.Adding three columns to your footer is easy and gives a web 2.0 appeal in your design.

Remember to back up your template before making changes.

In this case there is another warning for you.

Warning:

Move all existing widgets from the footer section to sidebar. (Till we apply this hack)

Your task is to create a three column footer.So lets not waste your time anymore and proceed to the hack of How to add three columns to footer.

Steps:

• Login to your blog account
• Dashboard appears on successful login
• Go to layout – edit HTML
• Find the following code (use browser’s find function dude)

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

Note: Some templates may have “footer” instead of “footer wrapper”

• Replace the code in red color 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>

• Save the template
• Now we have to add style to footer section
• Find this code ]]></b:skin>
• Add the following code above ]]></b:skin>

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

.footer-column {padding: 10px;}

• Save the template.
• Go to page elements tab
• You can now see that your footer is divided into 3 columns

Any suggestions are welcome

Related posts:

1. New Layout of Blogging Tips
2. How is this facebook new look ? 3 columns layout for facebook !
3. Create a 3 column template with two sidebars
4. Add Third Column to Blog
5. How to split blogger header into two columns

Tagged as: footer

Like this post? Post Comment, Download and Subscribe RSS