MileStone

#1 Tech Blog In Kerala

Create a Floating Sticky Footer Bar in Blogger

04:35 By

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.
  3. /*  MBL Floating Sticky Footer Bar For Blogger (www.mybloggerlab.com) */

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

  18. #MBL-footer-bar a {
  19.     float: right;
  20.     margin: 0;
  21.     padding: 0;
  22.     background-color: #333;
  23. }

  25. #MBL-footer-bar a.first {
  26.     float: left;
  27.     margin-top: -1px;
  28. }

  30. .MBL-footer-wrapper {
  31.     max-width: 92%;
  32.     width: 960px;
  33.     margin: 0 auto;
  34. }
  35.  .MBL-footer-wrapper {
  36.         width: 100%;
  37.         padding: 10 10%;
  38.     }
  39.    
  40. @media only screen and (max-width : 649px), 
  41. only screen and (min-device-width : 320px) and (max-device-width : 685px) {
  43. #MBL-footer-bar {
  44.         position: static;
  45.     }

  47. .MBL-footer-wrapper {
  48.         width: 90%;
  49.         padding: 0 5%;
  50.     }}
  52. #tips, #tips li{margin:0; padding:8px; list-style:none; }

  54. #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; }

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

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

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

  • This time search for </head> and above it paste the following JavaScript code.
  4. <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>
  5. <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>
  6. <script type="text/javascript">
  7. if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
  8. </script>

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

  12. <script src='http://mybloggerlab.com/Scripts/main.js' type='text/javascript'/>
  • Now finally, search for <body> and just below it pastes the following HTML code.
  3. <header class='cf' id='page-header'/>
  4. <div id='MBL-footer-bar'>
  5. <div class='MBL-footer-wrapper'>
  6. <a class='go-top first' href='#page-header'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVQXYd2MI5h61rnCdFCN_YUxK77miIWLr190gigPayRIZxehEv3c2WvAuScKEQRkOvzhyphenhyphenLOwbWcuAqK2AnKQCEbPO3foihdEIN_jFY258dgWGe7i8J0CHKFL2YmGAbRJ0yXjgOR3BAGo/s1600/UP.png'/></a>

  8. <a href='https://plus.google.com/u/0/106374439082237286396' target='_blank' title='Follow On Google+'><img alt='google+ page' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0Lq6-9kqxh-pFKV9xtFyvyUJgFgXwvgq8mOBL3GE7EdBviLLNm-HviVZgxPTPT6-sq4ja17B-mQaPk5jozJP7KcahwKsUlDmX-ro_Z_ZPSj6-oRPIaVva9R5sXYUnxR018c_honV0AAD/s1600/GooglePlus.png'/></a>

  10. <a href='http://www.facebook.com/mybloggerlab' target='_blank' title='Follow On Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6UpcFWr8jJ-mSXCsoIDtK1Lqsme1wNW5mdMQaEIC9X7jaqo375gQHM9jeMDv3VWoVik75UjGPLqREXbDFwl5xswa8kJ10IewVCfG5o7Y1o9RQxsqLvI7MTI5yqZw4Kf3wwm2_Wf7TG4Z0/s1600/FB.png'/></a>

  12. <a href='http://twitter.com/Mybloggerlab' target='_blank' title='Follow Us'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRu-cI7OyDM09-1loFeJO2g9H3knP9Hq57TCNH4hsLQdaEoStXqjuPz6RSXWXaqqRcfWufo-5ww-gP_vKJJKou0-Ig6VFsRp9NLHXcXHK5lEPZ3U954udUwBz-n-y0taUHLVSXZr03Okm/s1600/Twitter.pngg'/></a>

  14. <a href='http://feeds.feedburner.com/mybloggerlab' title='Get Updates'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFysLbUh5pctIk0CHeTHf-cgKuZeq5wiQVMQi8pt0fpxAUfKOhrGn0TSLt-2fs4bsaKXKDVpNbbApCbwIxuqh0FPrkh2irpeXgG1RYOPIsP0znulgkkaJXzTL63cHuvsGUVJrNTJet35GD/s1600/RSS.png'/></a>


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

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

  23. <li><a href='http://www.mybloggerlab.com'>This Is Third Item</a></li>
Customization:
  1. <li><a href='http://www.mybloggerlab.com'>This Is Forth Item</a></li>

  3. </ul>
  4. </div>
  5. </div>

  7. </div>
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 #333with 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.