How To Create a Floating Sticky Footer Bar in Blogger

Advertisements
Are you fed up with your boring footer and would desire to renovate it into something that could thrill your readers? Footer represents the complete outlook of a blog because it has most prominent information that is extremely crucial for a web owner. As we all know, Footer is situated at the end of the websites so the probabilities are exceedingly slim that your visitors will ever going to see it properly. Therefore, it is extremely essential that a web owner should integrate a “Sticky” floating Footer bar to his blog or website so he can maximize the visitor’s attention. Having a Sticky bar at the bottom of the website has numerous advantages we can also list featured post on it to get maximum attention of visitors. In this article, we will learn how to create a sticky floating footer bar in Blogger.


Why To Use The Sticky Footer Bar:

You can use it to turn the attention of your readers towards a specific article which could be a featured post, a special offer or whatever you like. The version of the Footer which we are showing you in this article is low simpler, then a Hello bar because it does not have the option to close. It is a static footer bar that swaps your content with the help of an extremely modest jQuery. The reason why we recommend you to use it on your website is that it is pretty lightweight and does the job quite handsomely.

When and Where The Floating Footer Will Appear:

Just look at the following screenshot, in which you can witness a Sticky footer bar that is equipped with Social icons, a back to top button and a featured article link. It will remain attach to the bottom of your website while it will scroll along the screen.

How To Create a Sticky Footer Bar in Blogger:

The steps are extremely straightforward and would hardly soak 10 minutes for completion. Even though, the title say that it is for WordPress but it can be utilized in any website. All we have here is a bit of CSS and Jquery which does the magic.  
  • Go To Blogger.com >> Template >> Edit HTML >> Proceed.
  • Now within the template search for ]]></b:skin> and just above it paste the following CSS coding.
  1. /*  MBL Floating Sticky Footer Bar For Blogger (www.mybloggerlab.com) */

  2. #MBL-footer-bar {
  3.     position: fixed;
  4.     bottom: 0;
  5.     z-index: 100;
  6.     width: 100%;
  7.     height: 38px;
  8.     clear: both;
  9.     margin: 0;
  10.     padding-bottom: 4px;
  11.     background-color: #333;
  12.     overflow: hidden;
  13. }

  14. #MBL-footer-bar a {
  15.     float: right;
  16.     margin: 0;
  17.     padding: 0;
  18.     background-color: #333;
  19. }

  20. #MBL-footer-bar a.first {
  21.     float: left;
  22.     margin-top: -1px;
  23. }

  24. .MBL-footer-wrapper {
  25.     max-width: 92%;
  26.     width: 960px;
  27.     margin: 0 auto;
  28. }
  29.  .MBL-footer-wrapper {
  30.         width: 100%;
  31.         padding: 10 10%;
  32.     }
  33.    
  34. @media only screen and (max-width : 649px), 
  35. only screen and (min-device-width : 320px) and (max-device-width : 685px) {
  36. #MBL-footer-bar {
  37.         position: static;
  38.     }

  39. .MBL-footer-wrapper {
  40.         width: 90%;
  41.         padding: 0 5%;
  42.     }}
  43. #tips, #tips li{margin:0; padding:8px; list-style:none; }

  44. #tips{width: 100%; font-size:22px; line-height:120%; font-family: Arial, Helvetica, sans-serif; vertical-align:middle; margin: -2px 0 0; opacity: 0.95; font-weight: bold; }

  45. #tips li{padding: 0px 0; display:none; float:left;  }

  46. #tips li a{color: #fff;  }

  47. #tips li a:hover{text-decoration: none; }

  • This time search for </head> and above it paste the following JavaScript code.
  1. <script>$('#MBL-footer-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#MBL-footer-bar').slideDown(200)}else{$('#MBL-footer-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script>
  2. <script>var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-20868082-3']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript'ga.async=true;ga.src=('https:'==document.location.protocol?'https:var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s)})();</script>
  3. <script type="text/javascript">
  4. if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
  5. </script>

  6. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2' type='text/javascript'/>

  7. <script src='https://mybloggerlab.googlecode.com/files/main.js' type='text/javascript'/>
  • Now finally, search for <body> and just below it pastes the following HTML code.
  1. <header class='cf' id='page-header'/>
  2. <div id='MBL-footer-bar'>
  3. <div class='MBL-footer-wrapper'>
  4. <a class='go-top first' href='#page-header'><img alt='Back To Top' src='http://2.bp.blogspot.com/-CXa-s3SMh2Y/UGWdSKLMsbI/AAAAAAAAFqo/G0i1AoJFQrM/s1600/UP.png'/></a>

  5. <a href='https://plus.google.com/u/0/106374439082237286396' target='_blank' title='Follow On Google+'><img alt='google+ page' src='http://2.bp.blogspot.com/-wckYk5NRFEQ/UGMljyhiGHI/AAAAAAAAFn4/_QElJGaFmxg/s1600/GooglePlus.png'/></a>

  6. <a href='http://www.facebook.com/mybloggerlab' target='_blank' title='Follow On Facebook'><img alt='facebook' src='http://3.bp.blogspot.com/-jN3QU9VEUsg/UGMlQ6BAxwI/AAAAAAAAFnw/V3KogbsmPgA/s1600/FB.png'/></a>

  7. <a href='http://twitter.com/Mybloggerlab' target='_blank' title='Follow Us'><img alt='twitter' src='http://2.bp.blogspot.com/-_7cTtJ0pkDk/UGMl7bTfFBI/AAAAAAAAFoI/fHOi8iATOyg/s1600/Twitter.pngg'/></a>

  8. <a href='http://feeds.feedburner.com/mybloggerlab' title='Get Updates'><img alt='rss' src='http://4.bp.blogspot.com/-pufqSN0B4P4/UGMlu8hNUQI/AAAAAAAAFoA/GB1eeUh5jsY/s1600/RSS.png'/></a>


  9. <div class='boxfloat'>
  10. <ul id='tips'>
  11. <li><a href='http://www.mybloggerlab.com'>MyBloggerLab is the First Item</a></li>

  12. <li><a href='http://www.blogger.com'>Blogger.com is the Second Item</a></li>

  13. <li><a href='http://www.mybloggerlab.com'>This Is Third Item</a></li>

  14. <li><a href='http://www.mybloggerlab.com'>This Is Forth Item</a></li>

  15. </ul>
  16. </div>
  17. </div>

  18. </div>
Customization:
You can include multiple featured post links in it. However, only one item will be shown to your visitor, which will rotate whenever someone will reload the page. 

Don’t forget to replace the above colored links with your social accounts i.e. Google Plus, Facebook, Twitter and RSS Feeds.

To Change the background color of the Footer bar simple replace The two #333 with your desired color from the above CSS Coding.

All Done: Now once you have customized the footer according to your desire needs go ahead and save your template by pressing save template bottom.

From The Editor’s Desk:
Well, there is no limitation. You can add more functionality to your footer by playing with HTML and CSS all you need is a bit of creativity. We hope you have found it useful. We’d love to hear your thoughts via comments. If you have any queries then do utilize our FREE Blogger Support till then Peace, Blessings and Happy floating.

Disclaimer: 
Rotating Featured Articles JQuery Credits to WPBeginner while the rest of Footer bar is individually created by MBL Team so please respect the copyrights.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

24 comments

September 27, 2012 at 5:52 PM

Its looking very nice my dear friend. Do I change the color?

Trever Reznick

September 28, 2012 at 12:07 AM

Nice Sticky Bar!
Thanks for sharing the post Syed.

Free $169 Thesis 1.8 Wordpress Theme

September 28, 2012 at 2:34 AM

nice thanks for sharing this :)

Movies4U.us

September 28, 2012 at 5:29 AM

What a Widget Syed sir!I was looking for a sticky bar from along time but not able to find which fit in my blog,At last your sticky bar is unique as well as graet.But I want to change its background colour as it is same as my footer colour.How to change it?
MyTechPromo

Editorial Team MOD
September 28, 2012 at 6:04 AM

Thanks For Admiring our Work, You Can Change The Color Of the Footer Bar By Replacing The TWO #333 with your desired color form the Above CSS Coding. Peace and Blessings

Editorial Team MOD
September 28, 2012 at 6:04 AM

Yes, You can Change the Color With EASE Simply Replace the #333 With your Desired Color from the Above CSS Coding. Peace

November 4, 2012 at 8:13 AM

Hey dude not working for me what to do?? http://geeksware.blogspot.in/ visit here

Editorial Team MOD
November 5, 2012 at 12:35 AM

Hey We checked your blog and we didn't find the coding on your site. Please follow the steps properly. Peace

November 16, 2012 at 11:32 PM

I CAN NOT FIND THE BODY TAG IN MY TEMPLATE Now finally, search for body and just below it pastes the following HTML code.

November 20, 2012 at 3:05 PM

Hi - love this widget - is there any way to change 'Latest' to say something else?

like - 'what's hot' or 'popular' , etc?

Editorial Team MOD
November 21, 2012 at 12:34 AM

Yeah, there is a way through which you can change the word "LATEST" simply Replace the following image with

http://2.bp.blogspot.com/-CXa-s3SMh2Y/UGWdSKLMsbI/AAAAAAAAFqo/G0i1AoJFQrM/s1600/UP.png

Something Else. Peace and Blessings

November 21, 2012 at 7:29 AM

Thanx man! This is really cool!
Is there any way to make the footer transparent and put a 980x150 picture, center it and make it clickable?

December 1, 2012 at 12:15 AM
This comment has been removed by the author.
December 1, 2012 at 9:32 PM

I CAN NOT FIND THE BODY TAG IN MY TEMPLATE....
here's my blog http://softwaresuneeds.blogspot.in/

Editorial Team MOD
December 1, 2012 at 10:22 PM

Search for </body> and above it Paste the Coding. Peace

December 1, 2012 at 11:26 PM

thanx

February 8, 2013 at 9:54 PM

Can i change the position of the bar from bottom to top?

April 17, 2013 at 8:34 PM

thanks you :)

May 30, 2013 at 1:40 AM

thanks :) it works! :D

June 24, 2013 at 1:36 PM

do you know how, instead of a floating bar, I make a floating image footer?

July 31, 2013 at 3:28 AM

it's good i use in
http://pilibanganews.blogspot.in

August 14, 2013 at 11:31 PM

sorry i can't find /body this code plz help me .this is my blog http://uhscofficialforum.blogspot.com/

May 20, 2015 at 1:17 AM

I will try it in my new blog.

Sri
June 7, 2016 at 5:57 AM

its working man... its working great... Tks

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.