Add 3 Column Footer to Blogger Blog

Footer widgets are one of the most essential part of a blog for displaying less but must display content, like about the author, copyright notices, license etc. But many blogger templates out there don't come with footers and for people like you who like the design but miss the footer, here is a small guide to add a simple footer to your blog and if you know basic css, then you can make necessary changes to the styles.

How to Add Footer to Blogger

What we will integrate is a simple dark background, 960px wide footer area with 3 widget area of 306px each. We shall then demystify the necessary CSS part so that even if you don't know CSS, you can easily modify the looks.

To start with, login to your blogger account, navigate to 'Template' and hit 'Edit HTML'.

The HTML Structure Integration

This is a piece of cake step. Just copy the below code and paste it just above </body>. (Go to the bottom of the template code to find </body>)

<div id='footer-column'>
<div class='footer'>
 <b:section class='footerA' id='footerA' showaddelement='yes'/></div>
<div class='footer'>
 <b:section class='footerB' id='footerB' showaddelement='yes'/></div>
<div class='footer'>
 <b:section class='footerC' id='footerC' showaddelement='yes'/></div>
</div>

The CSS Style Integration

Here comes the part which defines the style of your footer widgets. First, let's just copy and paste the below code just above ]]></b:skin> in your blogger template. (Use CTRL+F to bring out the search feature of your browser and search ']]></b:skin>')

#footer-column{width:948px;margin:10px auto;padding:10px 6px;overflow:hidden;background:#333;color:#fff;}
.footer{width:306px;margin:0px 5px;padding:0px;overflow:hidden;float:left;}
.footer h2{font-weight:bold;margin:5px;padding:5px 0px;border-bottom:2px dashed #ff0000;color:#fff;}
.footer a{text-decoration:none;font-weight:bold;color:#00fff0;}
.footer a:hover{color:#fff;}

Hit 'Save'. So that should do the integration part. Now it should look something like this in Layout section :

And on the blog it should look like this :

Editing CSS Styles

For easy identification, we have highlighted the parts of the CSS code which sets the colors. If you can read English, then everything is self-explanatory. Note that the colors are in hex-code. Now lets break it,

footer-column is the 960 px wide box that houses these 3 footer widgets, hence changing background color from #333 (dark grey) to the required color changes the background color of entire footer area. And 'color' is the color of the text which you can change from default #fff (white) to something of your choice.

.footer h2 is the element that sets the style of widget titles. As you can see, we have set the text color to #fff and we have set a dashed border in the bottom which is red (#ff0000). Change it accordingly or if you don't want a border like that one, then just remove that part of css.

.footer a defines the style of anchor text, or in simple words, links. If you can see, the link color is light blue (#00fff0). Change it as you like and if you don't want the linked text to be bold then just remove 'font-weight:bold;' from the above code.

.footer a:hover sets the style for the linked text when someone points the mouse cursor on it. In our code, we have set the color on hover to white (#fff). Change it as you require.

That's it..! Come back for more.