Adding a footer section to a Blogger theme

This article is about how to add a a footer section to your blog.  It was written in late 2009, before Designer Themes were available.  Today, the best approach is to use a Designer theme.  However this article has been updated for people who are still using Layout themes.   It also shows you how to add additional footers, if there aren't enough for your needs in the Designer theme you are using.

Remember:  in Blogger, theme is just another word for template.

Footer sections and Blogger themes

Blogger's Designer themes (ref Theme types in Blogger) all let you configure the footer section - you can have a one, two or three column footer, and put one ore more gadgets in each of these columns.  This gives a lot of flexibility about how the footer looks.

If you are using an older Layout theme that doesn't ave a footer and you want to add one, you can either:

• Change themes (but this means that any customisations you've made, eg adding Analytics code) will be lost, OR
• Add a footer section to your existing theme, by customising the code - provided you are willing to accept the disadvantages of editing your theme.

How to add a footer section to a Layout theme

Edit your theme in the usual way

Find the part where the code says:

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

Add the following code immediately before this. (This adds a style for your new footer to use)

#footer {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

Find the part where the code says:

<!-- spacer for skins that want sidebar and main to be the same height-->
 <div class='clear'> </div>

Add this code immediately after that point (this is setting up the footer section in your new theme)

<div id='footer-wrapper'>
<b:section class='footer' id='footer' maxwidgets='10' showaddelement='yes'>
</b:section></div>

How to add an extra footer section to a Designer theme

A similar technique works for adding multiple Footers, if your theme already has one - you just have to make sure that the section gets a separate ID (eg id='footer2' in the part in bold-italics).

---

Related Articles

The difference between themes and template in Blogger

Theme types in Blogger.

Editing your blog's theme  advantanges and disadvantages

Adding a separator between your posts

Setting up Analytics code on your blog