Customize Blogger Footer : Create more than one columns footer

Another blogger hack tips for today is customize the footer on Blogger platform. Sometime you will need a lot of space to add some content in your footer. By default, blogger only has one column footer.

If you go to Blogger Dashboard and Layout section, you will see that the footer only have one Add a Gadget element that has the same width like total width of the blog.

But do you know that you can customize this footer into more than one columns footer like below

To make your footer like above, it is very easy. Just follow the step below.

1. Login into your Blogger Dashboard and click Layout
2. Make sure there is no footer in your layout. If there is a footer, then remove it or drag it into your sidebar.
3. Enter Template section. Click Edit HTML and Proceed. Make sure you checked Expand Widget Templates.
4. Search for this code :

]]></b:skin>
</head>

5. Copy the CSS code below above it

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

The above code is the default format of the footer. If you understand about CSS Code and want to modify its border, color, background, etc, you can replace above code. If you don’t understand, you can learn more about CSS in W3 School (CSS).

6. Next thing to do is replace the footer section code. Search this code

<b:section class='footer' id='footer'/>

and replace it with this code:

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

7. Save the template

Incoming search terms:

• blogger footer
• remove dotted line footer blogger
• how to make footer in blogger
• how to create a footer in blogger
• how to create a footer on blogger
• how to get 8 columns in blogger footer
• how to have more than 3 gadget on blogger footer
• how to make 3 gadgets in one line blogger
• remove dotted footer blogger css
• how to create a footer for blogger

Be Sociable, Share!

•