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.
- /* MBL Floating Sticky Footer Bar For Blogger (www.mybloggerlab.com) */
- #MBL-footer-bar {
- position: fixed;
- bottom: 0;
- z-index: 100;
- width: 100%;
- height: 38px;
- clear: both;
- margin: 0;
- padding-bottom: 4px;
- background-color: #333;
- overflow: hidden;
- }
- #MBL-footer-bar a {
- float: right;
- margin: 0;
- padding: 0;
- background-color: #333;
- }
- #MBL-footer-bar a.first {
- float: left;
- margin-top: -1px;
- }
- .MBL-footer-wrapper {
- max-width: 92%;
- width: 960px;
- margin: 0 auto;
- }
- .MBL-footer-wrapper {
- width: 100%;
- padding: 10 10%;
- }
- @media only screen and (max-width : 649px),
- only screen and (min-device-width : 320px) and (max-device-width : 685px) {
- #MBL-footer-bar {
- position: static;
- }
- .MBL-footer-wrapper {
- width: 90%;
- padding: 0 5%;
- }}
- #tips, #tips li{margin:0; padding:8px; list-style:none; }
- #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; }
- #tips li{padding: 0px 0; display:none; float:left; }
- #tips li a{color: #fff; }
- #tips li a:hover{text-decoration: none; }
- This time search for </head> and above it paste the following JavaScript code.
- <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>
- <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>
- <script type="text/javascript">
- if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
- </script>
- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2' type='text/javascript'/>
- <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.
- <header class='cf' id='page-header'/>
- <div id='MBL-footer-bar'>
- <div class='MBL-footer-wrapper'>
- <a class='go-top first' href='#page-header'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmeTO1SbWvvcDh-LHcGZvsmur-2PDgFS-rijT4bLUsmFpq7Yl15fKOhoQmaYwrhwqpO1l-dPwmRlN_PDuK0TM31bHOayZi1ugxEWjfVgDg5rWOFcNNQu13geTrKEoZ8RRWvZ4IgUthpLg/s1600/UP.png'/></a>
- <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/AVvXsEg8sasVA8W_sjvNzGNfAVKeDp64snD0fRfnuZXZE4YUH0RMCXdzicFWx4Mz-H02lebxHxtzuMNz89sFLU13_XFukF3WEltFb1ZdrFZAkRhxnCYRHqHwfm6F-OPYV7z3UV8eNCzXpcbvTsmB/s1600/GooglePlus.png'/></a>
- <a href='http://www.facebook.com/mybloggerlab' target='_blank' title='Follow On Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNjqJ3TJjjEic60FxtUIJxygRtetO87Lf3HvvfkkcvuxOGh_3jlpEIo-54FePZgGUxmRIWzVz8FLJiompn4j0swl04BYGgNCgAchxqZjUeMc67PH2HvswVCMXRIf27kLzZXPcb7kQg8rJ9/s1600/FB.png'/></a>
- <a href='http://twitter.com/Mybloggerlab' target='_blank' title='Follow Us'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUIOU_BZnZRRMSegMcy3z1RszZYIeYWAAVoICSQXhvsnXl34o2jlEKHELh-maLbJq5o_7ICvaDGMTNM7VHQDqT7DPgxXMBA_SXolebgveO8h6VC-xE2iZ6tSeNzH00Untzu6s2pBA-XObr/s1600/Twitter.pngg'/></a>
- <a href='http://feeds.feedburner.com/mybloggerlab' title='Get Updates'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG8eCWd-aA7gI4wmNk1Hq5xhojxMFYrbYPKz3t6qHv3OhFq0tvZA7ezOL_aKiRyNBxWKjn8xUc2MousSJ75qJQhIrQCWtAPb93w8B7CgKFAdNq_cT-Mgkmywg_HxNOajivyENbGFMUYXE3/s1600/RSS.png'/></a>
- <div class='boxfloat'>
- <ul id='tips'>
- <li><a href='http://www.mybloggerlab.com'>MyBloggerLab is the First Item</a></li>
- <li><a href='http://www.blogger.com'>Blogger.com is the Second Item</a></li>
- <li><a href='http://www.mybloggerlab.com'>This Is Third Item</a></li>
- <li><a href='http://www.mybloggerlab.com'>This Is Forth Item</a></li>
- </ul>
- </div>
- </div>
- </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.
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.
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.
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.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
23 comments
Its looking very nice my dear friend. Do I change the color?
Trever Reznick
Nice Sticky Bar!
Thanks for sharing the post Syed.
Free $169 Thesis 1.8 Wordpress Theme
nice thanks for sharing this :)
Movies4U.us
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
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
Yes, You can Change the Color With EASE Simply Replace the #333 With your Desired Color from the Above CSS Coding. Peace
Hey dude not working for me what to do?? http://geeksware.blogspot.in/ visit here
Hey We checked your blog and we didn't find the coding on your site. Please follow the steps properly. Peace
Hi - love this widget - is there any way to change 'Latest' to say something else?
like - 'what's hot' or 'popular' , etc?
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
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?
I CAN NOT FIND THE BODY TAG IN MY TEMPLATE....
here's my blog http://softwaresuneeds.blogspot.in/
Search for </body> and above it Paste the Coding. Peace
thanx
Can i change the position of the bar from bottom to top?
thanks you :)
thanks :) it works! :D
do you know how, instead of a floating bar, I make a floating image footer?
it's good i use in
http://pilibanganews.blogspot.in
sorry i can't find /body this code plz help me .this is my blog http://uhscofficialforum.blogspot.com/
I will try it in my new blog.
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.