Home > Blogger, Blogging, Internet Business > Customize Blogger Footer : Create more than one columns footer

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.

blogger footer default

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

blogger footer 3 columns

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

Related Posts Plugin for WordPress, Blogger...
Be Sociable, Share!
  1. No comments yet.
  1. No trackbacks yet.