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:

Width	Force the footer to span horizontally all the way across the page
Height	Adjust your footer's height
Position	The most important attribute in this tutorial. It forces your element to be fixed in a defined position
Top and Left	Used 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!