» » » » How To Create a Floating 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. /*  EiM Floating Sticky Footer Bar For Blogger (www.E-ideamart.blogspot.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').s lideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);retu rn false})});</script>
  5. <script>var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-20868082-3']);_gaq.push(['_trackPageview']);(func tion(){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='https://mybloggerlab.googlecode.com/files/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/AVvXsEjJQO0ZrDUydNcsYHTGMMS60rpl_hiz-kVaOqmZCjS58ZvKgiPE6uWlIYPCubnXExvvmYd12PlEyTPmB2phhVTkYudlcj_A_ZQWB96C-kqP08OmedcZyPgoPWknLiznJDZSpmCnp9wEbB4/s1600/UP.png' /></a>

  8. <a href='https://plus.google.com/u/0/101845370194687634858' target='_blank' title='Follow On Google+'><img alt='google+ page' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBYmGKL08TSFS2CbGL6Fpan5RUR6TjSLfVR3pYgzt8-y-ghGjzTgNYBIwc7IiuoQuRg_ncrEVSrUiVqUzrdZOijOb9jkEeJoXv3Sp-7-9T0YDRs47qrS_JEWCqn4uo1vYGeGb4rBpjUgX/s1600/GoogleP lus.png'/></a>

  10. <a href='http://www.facebook.com/Eideamart' target='_blank' title='Follow On Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwQX7GAYDUWRQqmw2TLQob4O604-yDh-DGADU890CRHmbUYE10jJm2qJrvRwsNwrMPNl-2sRkurCB3wZiGsnwKpby-l8Ocy6CGK-xeTf1rdw4_LidgOF33vrAYB-sXlNOcO6o3jFOiRbl/s1600/FB.png' /></a>

  12. <a href='http://twitter.com/saadahmads' target='_blank' title='Follow Us'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwEhyphenhyphenjCxQkhlYTg30YgJ549twzfbz1EN99-djmKJiGDCgZjJzTNge_3JJuLZO5GLtRnvGU3rDYI4E4eBLHjseRNk-XssD6gX-dpTSeT46dikiDDx6cauiKz3BAhsEjaOosdsQjruY3446V/s1600/Twitter .pngg'/></a>

  14. <a href='http://e-ideamart.blogspot.com/feeds/posts/default' title='Get Updates'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKspWpc-uh-kpi9t4f-dwcu9UgD42X4CU6VHfDj9oZRMf3bjkS6jBdtjZufR-RU6yQTmtfTfJxmoHndxv__VNRek1CQDP5X3OnnJPmPxpo1MAOig6MWzCHrz3XDIydYHg3kqivSAB66Mp/s1600/RSS.png '/></a>


  17. <div class='boxfloat'>
  18. <ul id='tips'>
  20. <li><a href='http://www.e-ideamart.blogspot.com'>E-ideaMart is the First Item</a></li>

  22. <li><a href='http://www.e-ideamart.blogspot.com'>Blogger.com is the Second Item</a></li>

  24. <li><a href='http://www.e-ideamart.blogspot.com'>This Is Third Item</a></li>

  26. <li><a href='http://www.e-ideamart.blogspot.com'>This Is Forth Item</a></li>

  28. </ul>
  29. </div>
  30. </div>

  32. </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.
10:50
Unknown
, ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top