Have you ever wished that your blogger blog could have those sticky share buttons below the footer of many popular blogs you see today? Well, you might have seen this sticky share/like button below the footer of many popular blogs around, right? Many WordPress and Joomla users do use this sticky share/ like buttons as well because it has a plug-in to make it easy to install. But blogger blog don’t have a plug-in or widget for this. But hey, there’s no need to panic because today, I am going to be dropping a simple code to achieve this for you.
Some days back, I was searching for a simple blogger code that can give my blogger blog a sticky bar below my blog footer. Unfortunately, a friend was able to help me out with the exact code I was looking for. I implemented the code and viola, looked pretty sweet. Would you like to see the demo of the sticky bar? I created a demo site just for it so check it out here…
Must Read: You Don’t Get Comments to Your Blog? These are the Reasons Why
What’s inside the sticky bar? The sticky bar come with like buttons, search button, share button and translate feature as well but you can add more depending on what you want the sticky bar to feature.
Did you like what you saw? If yes, then let’s go straight to the tutorial, shall we!
Note: The codes displayed in this post is not mine but since it is working 100% for me, I decide to share it with you so you can benefit from it 
Adding a Sticky Share Button below Footer for Blogger
Are you ready? If yes, make sure you back up your blogger blog template first before attempting any code edit.
Now simply go to your blogger blog dashboard >>> click on Template >>> Click Edit HTML and you are in your template code area.
Now that we are in our code area, let’s search for the ]]></b:skin> tag.
Have you seen it? To make the search more easy and accurate, click inside the code area and simultaneously press the ctrl + F key to bring out a search box.
Now, right above the ]]></b:skin> tag, paste the below css code
#custom-toolbar {
overflow: auto;
position: fixed;
background: #1B1B1B url("http://1.bp.blogspot.com/-0XYBiDXh7Vo/Uupp-CQrhJI/AAAAAAAAF_8/qKBKfmooBVQ/s1600/pagelist.png") repeat-x scroll 0 bottom;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
height: 33px;
margin: 0 auto;
width: 100%;
bottom:0px;
right:0;
}
.close-toolbar {
float: right;
margin-top:6px;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}
.search-text {
color: #D1D1D1;
text-align: center;
border-radius: 10px;
}
.google_translate:hover img {
filter:alpha(opacity=0.90);
-moz-opacity: 0.90;
opacity: 0.90;
border:0;
}
Have you done that? If yes, congratulations because we have successfully passed the first stage of our coding process, now let’s move on to the second round.
Are you still in you coding area? Now simply search for the </head> tag.
Have you seen it? If yes, right above the </head> tag, paste the below JavaScript
<script type='text/javascript'>
// Custom Toolbar for Blogger (onenaijablog.com)
//<![CDATA[
var toolbar_blogger = new Array();
var toolbar_clear = new Array();
function toolbarFloat(toolb) {
toolbar_blogger[toolbar_blogger.length] = this;
var ftrpointer = eval(toolbar_blogger.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode & document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolbar_blogger[toolbpointer]);
var toolbbar = 'toolbar_clear['+toolbpointer+'] = setInterval("toolbarFloatInit(toolbar_blogger['+toolbpointer+'])",1);';
toolbbar = toolbbar;
eval(toolbbar);
}
function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return toolbTotOffset;
}
function toolbarFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("custom-toolbar").style.visibility = "hidden";
}
//]]>
</script>
Now, we have successfully completed both the CSS and JavaScript code. And now, it is time for the main part of the show. Hope you are still with me guys? If yes, let’s move on to the main show…
Must Read: You Have an Awesome Blog, What Next?
Simply search for the </body> tag.
Have you seen it? If yes, right above the </body> tag, paste the below codes
<div id='custom-toolbar'> <img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='http://1.bp.blogspot.com/-eGh5FWRNbHo/Uvf_Q2nYXLI/AAAAAAAAGDs/8Q2pMCs2OsU/s1600/close_button.png' title='Close' width='17'/> <table border='0' cellpadding='2'> <tr> <td style='padding-left:30px; padding-right:50px;'><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> <input class='search-text' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form></td> <td style='padding-left:20px;'><a href='http://www.facebook.com/your-username-here' title='Follow on Facebook'><img src='http://4.bp.blogspot.com/-qF-13gWPCho/Uvftq1v5ApI/AAAAAAAAGCo/hoFWKPCSUro/s1600/facebook-icon.png'/></a></td> <td><a href='http://twitter.com/your-username-here' title='Follow on Twitter'><img src='http://4.bp.blogspot.com/-OSxpeBNLK4A/UvfuiIkU5RI/AAAAAAAAGC4/Cq4TdM5fmhs/s1600/twitter-icon.png'/></a></td> <td><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to Feed'><img src='http://1.bp.blogspot.com/-wRI1rmbhV0M/Uvfvq5ZBMjI/AAAAAAAAGDU/6BSlAgac3sw/s1600/rss-feed-icon2.png'/></a></td> <td style='padding-left:40px; padding-top: 5px;'><a class='twitter-share-button' data-count='horizontal' data-lang='en' href='http://twitter.com/share' title='Publish on Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td> <td><a href='http://www.facebook.com/sharer.php' name='fb_share' title='Publish on Facebook' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td> <td style='padding-left:60px;'><a href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cen&hl=en&ie=UTF8"); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='http://1.bp.blogspot.com/-sXhoGx5s2dg/T5xOeRCOuYI/AAAAAAAAARo/ldYJIGQldwQ/s1600/United+Kingdom(Great+Britain).png' width='24'/></a></td> <td><a href='Javascript:void(0)' onclick="window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cde&hl=en&ie=UTF8"); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/-nX0ktPsJQTA/T5xOMiiOGQI/AAAAAAAAARY/VXhAPARvh9E/s1600/Germany.png" width="24"/></a></td> <td><a href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cfr&hl=en&ie=UTF8"); return false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='http://2.bp.blogspot.com/-aklFaq6pPeQ/T5xOV1mPbcI/AAAAAAAAARg/CcBmt1ptN88/s1600/France.png' width='24'/></a></td> <td><a href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Car&hl=en&ie=UTF8"); return false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='http://3.bp.blogspot.com/-cx9e66I48yM/T5xM9L7uzoI/AAAAAAAAAQY/ftpOVX9YZEE/s1600/Saudi+Arabia.png' width='24'/></a></td> <td><a href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Czh-cn&hl=en&ie=UTF8"); return false;' rel='nofollow' title='Chinese Simplified'><img align='absbottom' alt='Chinese Simplified' border='0' height='24' src='http://1.bp.blogspot.com/-eXup49w042c/T5xMxliSlmI/AAAAAAAAAQQ/v9efq8I4TI0/s1600/China.png' width='24'/></a></td> </tr> </table> </div>
Note: make sure you change ‘http://www.facebook.com/your-username-here and ‘http://www.twitter.com/your-username-here to your own username, so people can easily like your page.
You can add modify the code to your taste because it is easy to customize
Back to you
It looks like I have said so much about how to add a sticky bar on blogger blog. Now it is time to pass the keyboard to you guys…
Must Read: Three things that can make you an Inferior Blogger
Do you have comments, questions or thoughts you’d love to share with us? Then please do by using the comment box below. Remember that your comments, questions and thoughts are highly welcomed and much appreciated.
Be Social
I know that there are a lot of bloggers out there looking for a sticky bar. Do share this post across your social network and help a friend out :).
Before you go, do not forget to subscribe to our feed for your latest update on the go
Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated
Enter your email address below:
Powered by OnenaijaBlog
