Monday, December 28, 2009

Adding a footer section to a Blogger template

This article is about how to add a a footer section to your blog.  It was written in late 2009, before Designer Templates were available.  Today, the best approach is to use a Designer template.  However this article has been updated for people who are still using Layout templates.

Footer sections and Blogger templates

HTML5-BlockElementsBlogger's Designer Templates (ref Template types in Blogger) all let you configure the footer section - you can have a one, two or three column footer, and this together with choosing where to add gadgets gives a lot of flexibility about how the footer looks.  
But if you are using an older Layout template that doesn't ave a footer and you want to add one, you can either:

Ading a footer section to a Layout template

Edit your template  

  • Pre-Sept-11:  Design > Edit HTML        
  • Post-Sept-11:  Template > Edit HTML > Proceed


Download a full copy of your existing template (in case things go wrong), and put it somewhere safe

Find the part where the code says:
]]></b:skin>
</head>

Add the following code immediately before this. (This adds a style for youre 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 template)
<div id='footer-wrapper'>
<b:section class='footer' id='footer' maxwidgets='10' showaddelement='yes'>
</b:section></div>


A similar technique works for adding multiple Footers, if your template 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:



Template types in Blogger.

Editing your blog's template:  advantanges and disadvantages

Removing the attribution gadget ("Powered by Blogger) from blogs with designer templates

Putting a picture into a blog post

Adding a separator between your posts

Setting up Analytics code on your blog

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

5 comments:

  1. How do I add a text-gadget to a footer?

    How do I add HTML/JavaScript gadget to the footer of each page?


    or


    How do I insert HTML/JavaScript gadget in the footer of each page?


    or


    How do I insert a link to my HOME page in the footer of each page?



    Thx

    ReplyDelete
  2. One option is to add a footer section, as described in the article, and then use Design > Page Elements to add the gadget in the usual way.

    This will put the footer into the very bottom section of the blog.

    If you want to add the gadgets to immediatley under your posts (all the posts on the page), then add the gadget in Design > Page Elements and drag-and-drop it to underneath you Blog Posts area.

    If you want to add the gadgets to immediatley under individual posts, then ask for help in the Blogger Help Forum - I have researched how do to do this, but haven't written it up.

    ReplyDelete
  3. Mary, thank you

    I did not explain correctly what I wanted ....

    http://electricianintorontoelectrician.blogspot.com/

    How do I add HTML to the existing footer where the share buttons and edit pencil are located?

    or

    How do I insert HTML/JavaScript gadget in the footer of each page? Specifically to the right hand side of the footer where the share buttons and edit pencil icon are located

    or

    How do I insert a link in the footer of each page (to my HOME page)? to the right hand side of the same footer where the share buttons and edit pencil icon are located

    ReplyDelete
  4. Ahh, sorry I misunderstood.

    I don't know how to do exactly what you're after, but have described an answer that may be good enough on this thread:

    http://www.google.com/support/forum/p/blogger/thread?tid=782720472fd665c3&hl=en&fid=782720472fd665c300049bc9d35caea8

    ReplyDelete