In my previous post you have already seen how to add 3 column footer widget to your blogger.
Now it’s really easy to add 4 column footer widget in your blogger website but some of my friends were getting difficulties in doing the same. So I am posting this article to add 4 column footer widget to your blog.
- First you have to Login into your Blogger account.
- Navigate to Layout section.
- Move or Delete any existing widgets from the footer section or place them temporarily to the sidebar and save changes.
- Backup of your template from Template section by clicking on Backup/Restore option to download it into your computer.
- Now navigate to Layout and click on Edit HTML.
- You have to find following section in your Blogger template.
<div id='footer-wrapper_section'> <b:section class='footer' id='footer'/> </div>
If you are getting some difficulty in finding the above section then you may try for footer-wrap or footer_wrapper or something similar like that as sometimes this section is called something else in some templates.
Now replace all the above code with the following code.
<div id='footer-columns'> <div id='footer-1' style='width: 25%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='column1' preferred='yes' style='float:left;'/> </div> <div id='footer-2' style='width: 25%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='column2' preferred='yes' style='float:left;'/> </div> <div id='footer-3' style='width: 25%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='column3' preferred='yes' style='float:left;'/> </div> <div id='footer-4' style='width: 25%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='column4' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> </div>
- Now save the changes.
- Click on Layout and here you will see a 4 column footer.
- Now you can Move or Re-create the desired gadgets to your Blogger footer columns.
If you want to create a top border in footer then paste following code before the </b:skin> tag
#footer-columns{
border-top:1px dotted #5493d1;
clear:both;
margin:0 auto;
}
I hope this article will help you to add 4 column footer in you blogger template.
