How To Create a Floating Sticky Footer Bar inwards Blogger

Are yous fed upwardly alongside your tiresome footer as well as would wishing to renovate it into something that could thrill your readers? Footer represents the consummate outlook of a weblog because it has nigh prominent data that is extremely crucial for a spider web owner. As nosotros all know, Footer is situated at the halt of the websites thence the probabilities are exceedingly slim that your visitors volition always going to run across it properly. Therefore, it is extremely essential that a spider web possessor should integrate a “Sticky” floating Footer bar to his weblog or website thence he tin maximize the visitor’s attention. Having a Sticky bar at the bottom of the website has numerous advantages nosotros tin likewise listing featured post on it to acquire maximum attending of visitors. In this article, nosotros volition larn how to exercise a gummy floating footer bar inwards Blogger.

Why To Use The Sticky Footer Bar:

You tin exercise it to plow the attending of your readers towards a specific article which could hold upwardly a featured post, a special offering or whatever yous like. The version of the Footer which nosotros are showing yous inwards this article is depression simpler, thence a Hello bar because it does non accept the pick to close. It is a static footer bar that swaps your content alongside the aid of an extremely pocket-size jQuery. The argue why nosotros recommend yous to exercise it on your website is that it is pretty lightweight as well as does the chore quite handsomely.

When as well as Where The Floating Footer Will Appear:

Just await at the next screenshot, inwards which yous tin witness a Sticky footer bar that is equipped alongside Social icons, a dorsum to top button as well as a featured article link. It volition stay attach to the bottom of your website spell it volition scroll along the screen.

How To Create a Sticky Footer Bar inwards Blogger:

The steps are extremely straightforward as well as would hardly soak 10 minutes for completion. Even though, the championship country that it is for WordPress but it tin hold upwardly utilized inwards whatever website. All nosotros accept hither is a combat of CSS as well as Jquery which does the magic.  
  • Go To Blogger.com >> Template >> Edit HTML >> Proceed.
  • Now inside the template search for ]]></b:skin> and simply to a higher house it glue the next 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 exclusively concealment as well as (max-width : 649px), 
  35. only concealment as well as (min-device-width : 320px) as well as (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 fourth dimension search for </head> as well as to a higher house it glue the next 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> as well as simply below it pastes the next 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=’omelto.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=’omelto.com’>This Is Third Item</a></li>

  14. <li><a href=’omelto.com’>This Is Forth Item</a></li>

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

  18. </div>
Customization:
You tin include multiple featured post service links inwards it. However, exclusively 1 special volition hold upwardly shown to your visitor, which volition rotate whenever someone volition reload the page. 

Don’t forget to supervene upon the to a higher house colored links alongside your social accounts i.e. Google Plus, Facebook, Twitter as well as RSS Feeds.

To Change the background color of the Footer bar uncomplicated supervene upon The two #333 with your desired color from the to a higher house CSS Coding.

All Done: Now in 1 trial yous accept customized the footer according to your wishing needs become ahead as well as relieve your template past times pressing relieve template bottom.

From The Editor’s Desk:

Well, at that topographic point is no limitation. You tin add together to a greater extent than functionality to your footer past times playing alongside HTML as well as CSS all yous remove is a combat of creativity. We promise yous accept constitute it useful. We’d honey to listen your thoughts via comments. If yous accept whatever queries thence exercise utilize our FREE Blogger Support till thence Peace, Blessings as well as Happy floating.

Disclaimer: 
Rotating Featured Articles JQuery Credits to WPBeginner while the residuum of Footer bar is individually created past times MBL Team thence delight observe the copyrights.


Sumber http://www.mybloggerlab.com