Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, November 27, 2010

Blogger Floating Footer

Have you ever seen a toolbar or a footer that kinda floats on your screen and remains there even when you scroll around the page? For example, like this one I have here in my test blog:


This one is real easy to do. In this tutorial, you will learn how to float your footer. I have used Awesome Inc template since it comes with a nice footer on its own. So I just had to modify it a little. I wont be discussing on how you can decorate your footer before floating it. That is totally up to you. You can place an image, text, widget, attribute or anything there, that's irrelevant to this tutorial. So, go to Template Designer or look for some tutorials on how you can do that first. When you have a satisfactory footer, come back here and see how you can make it float in one easy step!




If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface:
Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 
footer {
width: 100%;
height: 100px;
position: fixed;
left: 0px;
bottom: 0px;
}

body {
margin-bottom: 40px;
}

You're done! Here's a short overview of what each attribute does:

WidthForce the footer to span horizontally all the way across the page
HeightAdjust your footer's height
PositionThe most important attribute in this tutorial. It forces your element to be fixed in a defined position
Top and LeftUsed to define the fixed position of the footer. Setting it to 0 makes your footer fixed on the bottom left section of your page.
Margin-bottom (body)In some cases, the footer overlaps on top of the last post when you've scrolled down all the way to the bottom of your page. So use this attribute to define some gap between the last element on your page and the footer.

It doesn't just have to be a footer. You can apply the same idea to other elements as well. Just find a way to address them, then use the same CSS code for these elements. Have fun!

30 comments:

  1. It's me again with the blogger problems. When I double clicked on the yellow triangle with an exlamation mark this error message comes up:

    Permission denied
    3599887011-ed.js
    Code 0

    Line 72
    Char: 62

    http://www.blogger.com/static/v1/jsbin/

    What does this mean? Can I fix my blogs? I have 5 and every one of them is like this. I cannot write new posts, edit, change design, and sometimes it affects my ability to link to a meme. What can I do?

    riverboat38@hotmail.com

    I am using IE8 and updated Java today.

    ReplyDelete
  2. I'm not sure if this is a problem with Blogger. Sounds more like a browser-compatibility problem to me. Have you tried with a different browser, preferably with Google Chrome? That way we can determine if the problem is with your blog or browser.

    ReplyDelete
  3. Hey,

    I want my footer to sit on a horizontally tiling background image at the bottom of my page (not floating like in this tutorial). I've read several way to do this but none have worked for me yet. Do you have any suggestions? I'm also using the awesome inc template.

    thanks!

    ReplyDelete
    Replies
    1. Hi CafeRacers,

      I can't quite picture that. Can I have a look at an example?

      Delete
  4. Basically instead of a flat colour in my footer background I want to use a tiling image that runs along the base of the site. Does that make sense?

    Thanks

    ReplyDelete
    Replies
    1. The word 'tile' confuses me. Can I have an example to look at?

      In any case, see if this is what you're going for. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .footer-fauxborder-left{
      background: url(http://i564.photobucket.com/albums/ss90/yoboy7/mastercopy-1.png);
      }

      Change the address in the code above to the address of the image that you wanna use as background.

      Delete
  5. Hi,

    By tile I mean a repeating imaunstated runs along the page background horizontally. Is that what this code does?

    Thanks

    ReplyDelete
  6. Is it possible to make the footer appear floating ONLY on scrolling to the bottom of the post?

    ReplyDelete
    Replies
    1. I'd think there should be a way with Javascript. The thing is, I can't quickly come up with a Javascript solution as I could with CSS. Right now I'm kinda tied up with my dissertation writing. If you could buzz me up again in 3 weeks time (when I'll be free), I'll be happy to try something out for you. Cheers :)

      Delete
  7. Good day Sir!
    Just want to ask if it's possible to create a three column footer in my blog?
    I've tried lots of tutorials around but it didn't work in my blog.
    If you think that it's still possible, I'm willing to wait for your response.
    My blog is http://asiandramaportal.blogspot.com
    Here's the link of my template.
    http://jumbofiles.com/zitlzv5ls8d6
    Thank you so much for the time! More power to your blog.

    ReplyDelete
    Replies
    1. Hey there,

      Looks like you don't have any widget in your footer at all. That means introducing a widget footer, and dividing them into three is gonna be a hell of a job, and not to mention, time-taking. Have you tried contacting your template maker? In any case, if you find yourself at wit's ends, create a thread in Blogger Help Forum. I'll see what I can do.

      Delete
  8. Hello :)

    is there any way to apply a floating footer to the dynamic views template? I want to have one always visible to display copyright and key links

    Thanks in advance

    Glen

    ReplyDelete
    Replies
    1. Hi Glen,

      Unfortunately this won't be possible, at least not for the time being. We have to introduce a new div element to the template for this to happen. With DV templates being so dynamic, static HTML changes are not even considered when a page is rendered, making all HTML tweaks useless.. Anyways, I'll have this in my 'to do list', in case if I see a way forward in the future..

      Cheers :)

      Delete
  9. hi yoga, i try all means to put a footer here ... is it possible ?

    ReplyDelete
    Replies
    1. Hi Madein BrazilEurope,

      If by 'here' you meant Dynamic Views, unfortunately, there isn't a way to do this yet.. We'll keep our fingers crossed :)

      Delete
  10. Hello again,

    Looks like blogger have finally opened up the HTML editing option for dynamic views - I can now click to edit the HTML of my blog.

    How would I go about adding a new div to put this brilliant footer in place?

    Thanks in advance Guru! :)

    ReplyDelete
    Replies
    1. Hi Glen,

      The Edit HTML feature has been enabled for quite some time now, and even before then, it was possible to force our ways into it. The reasons it wasn't so popular back then, and it isn't popular now, is because the HTML side of the blog is pretty much useless. The explanation in my previous reply still applies - the template is rendered dynamically.. Adding a static HTML would load a DIV tag - yes. But DV's script will run on top of it, making any static HTML tweaks really useless.. I'm still looking for ways to overcome this issue, not much luck so far.

      Delete
    2. ah I see, sorry that makes sense reading it a second time! Ta for replying :)

      Delete
  11. Hi,
    this is my blog: http://corporatehour.com

    I applied floating footer tweak there. It works fine with Chrome and mozilla but falls flat in IEs.

    How to solve this. Please help.

    ReplyDelete
    Replies
    1. Hi Deepak,

      Have you got it removed? Coz I can't see the footer in IE or Chrome at all..

      Delete
    2. O sorry! yes I removed it. Now using a better option then this floating footer. My blog looks beauty. ;)

      Delete
  12. Hi there, I'm currently using dynamic views template as you can see from my blog here http://highwardenhuntsman.blogspot.com/. Do you know if I can display similar footer like in this tutorial. Thanks.

    ReplyDelete
    Replies
    1. Hi Highwarden,

      This tutorials needs a new div element to be introduced to the template to serve as the footer. Unfortunately, I don't see a feasible way to introduce one in Dynamic View templates. I'm sorry I couldn't be much more of a help.

      Delete
    2. Hi Yoga,

      No worries, I just hope Blogspot will come up with the footer someday. Thanks anyways.

      cheers.

      Delete
  13. Hey there,

    Great tips! It looks like it works but I am looking to have a full width (span across the screen) footer without it being fixed. The code above fixes the position on the screen and I was hoping not to have that. It also overlaps a portion of the body of the page... is there a way around that?

    Thanks!!

    ReplyDelete
    Replies
    1. Hi there,

      Sorry for the late reply. Well, that's gonna require a makeover. Here, add this to your CSS (and make sure it saves):

      .footer-outer{
      position: absolute !important;
      }
      .footer-inner, #HTML3 {
      padding: 0px !important;
      margin: 0px !important;
      padding-top: 8px !important;
      }
      body{
      padding: 0px !important;
      }

      Cheers :)

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.