Add 3 Column Footer to Blogger Blog

Posted by Admin on 1/28/13 at 9:39 PM in ,,
Add footer to blogger blogs

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>

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 :

Blogger 3 Column Footer layout

And on the blog it should look like this :

Blogger 3 Column Footer

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.


Hello webmaster
i can't find the code ]]> in my blogger. I click ctrl + F to find the code ,but the phase not found, Do you know why? Please help me!

you will not find it, this blog post teach you how to add it. Just follow the steps

It works ! After I try this I end up with 2 footers (one on top of other) and 1 footer on the side. This was because the size show here was not matching my template size. I change the (width:306px;) to 300 and now they are in line. Great tutorial, thanks.

click edit html, you can see the
numbers in left side, and you can see a black solid arrow (play button symbol of a player)
click on the button very first from the top
you your code at the end of blue shaded codes.

Thank you very much. This was really helpful. I wasn't able to find the code ]]> either, but I searched for and from there I figured it out. Thanks a lot. Cheers

Post a Comment

Singapore Top Web & Mobile Development Company


Find Your Site on Google

Stay Updated with Newsteller
Copyright © 2013 Typical Tips. All Rights Reserved
About Us | Services