Adding a Sticky Share Button below Your Blog Footer : Blogger Blog

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.

STICKY-BAR

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);

}

&nbsp;

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'/>

&nbsp;

<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 == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form></td>

&nbsp;

<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>

&nbsp;

<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>

&nbsp;

<td><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to Feed'><img src='http://1.bp.blogspot.com/-wRI1rmbhV0M/Uvfvq5ZBMjI/AAAAAAAAGDU/6BSlAgac3sw/s1600/rss-feed-icon2.png'/></a></td>

&nbsp;

<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>

&nbsp;

<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>

&nbsp;

<td style='padding-left:60px;'><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cen&amp;hl=en&amp;ie=UTF8&quot;); 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>

&nbsp;

<td><a href='Javascript:void(0)' onclick="window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cde&amp;hl=en&amp;ie=UTF8&quot;); 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>

&nbsp;

<td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cfr&amp;hl=en&amp;ie=UTF8&quot;); 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>

&nbsp;

<td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Car&amp;hl=en&amp;ie=UTF8&quot;); 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>

&nbsp;

<td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Czh-cn&amp;hl=en&amp;ie=UTF8&quot;); 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>

&nbsp;

</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

Comments

  1. says

    Heyy babanture,
    Wow, Amazing as always. Vey nice trick to get more followers and obviously more readers. Generally, many blogs have social sharing icons on the top of their content but after reading the content visitors don’t even care to share the article. But these sticky icons would surely attract readers to share the post. Thanks for this ultimate trick.
    Eagerly waiting for your next post :)

    Stay blessed, Happy Blogging :)

    • says

      Hello Nikhil,
      It is good to put your share buttons in strategic areas in your blog, so it will be visible for readers to easily share your content.
      This post show you the simple way of adding a stick bar that will surely attract your readers to click and like your works :)

      Thanks for stopping by and dropping your wonderful comment, Do have a good week ahead…

  2. says

    Hi Babanature,

    That’s interesting :)

    I didn’t know that you had to use all these codes and pass through so much to get the sticky share button below in the footer area! I thought it was as easy as its for the WordPress users. Yes, there are many plugins and widgets you can use for that, though I never personally liked them as they distract me a great deal – but perhaps that’s good for some bloggers. I wonder how you get hold of such codes though, or create them yourself through hit and trial :)

    Thanks for sharing. Have a nice weekend :)

    • says

      Hello Harleena,
      You know, if you take a chance to open any wordpress plugin, you will discover that each of the php file in that zip file is many :)
      WordPress made it so simple for us, while blogger blog don’t care about updating their widget base. But thank God enough developers are creating interesting widgets like this everyday.

      Like my pops used to say; “if you don’t spoil it, you won’t learn it”…
      Thanks for stopping by and dropping your best comments as always. Do have a great week…

  3. says

    Cool stuff Baba!

    Just a bit of coding and you can have a critical share button on your blogger blog. I ditched my 3 bloggers blogs – cash gifting, online business and law of attraction sites – because I lacked functionality compared to WP. Well, might be time to get back in the blogger game with all the neat coding tricks I am learning these days.

    Of course, nailing down the 25th hour would help too ;)

    Thanks!

    • says

      Hello Ryan,
      Right now, you can have almost every plugins the wordpress blog have on your blogger blog. The thing is; developers have started focusing on blogger, and that’s a good thing. and this tip is an example :)

      Thanks for stopping by and dropping your comments, do have a peaceful week ahead…

  4. says

    It has been a while i visited this blog. Seen that you have finally changed your theme.Kudos nature.I guess this post is meant for blogger users, or is it also applicable to blogspot users too? It

    • says

      Hello Robinson,
      First let me say, welcome back to onenaijablog :) .
      Yes, i have switch my theme to Genesis and it looks lovely, doesn’t it?
      Is there any difference between the blogger blog and blogspot?
      Well, the post is for blogger blog/ blogspot
      Thanks for stopping by and dropping your comment. Do have a nice week ahead..

  5. says

    Hey Babanature,

    It’s really cool that you took the time to go out of your way and create content and in depth tips forma CMS that you don’t use.

    • says

      Ahahaha… That’s right, Amiti.
      Sometimes, it is good to go out of your comfort zone just to deliver the best :) .
      My blog is for bloggers using and wordpress platform… and soon, i might look into Joomla as well.
      Thanks and do have a good week ahead…

  6. says

    Hiii babanature,

    I will must say that you shared a desired stuff for blogger blog. WordPress users has hundreds of plugins but when it comes for Blogger Blog very few options appear in search result.

    you did a really great job by serving this article of Sticky Share Button below Footer for Blogger. I noticed one more thing that you explained all the steps according to the comfort of users that is much helpful.

    I am going to give a try and i will share my experience. I hope these Sticky Share Button will help me a lot.

    I found this useful post on kingged.com and became attracted to read full post. I loved it :)

  7. says

    handy code indeed Babanture
    But perhaps it will scare many bloggers :>
    A lot of these sticky widgets are very popular these days and why not, they really keep the attention.
    Every year we need to find another thing to get our readers attention and that is it for now!
    thanks for sharing your find
    ashley

  8. says

    Hello Babanature,
    This is indeed one interesting post that i love :) . I was actually looking for a sticky bar myself.
    I tried one earlier on but it didn’t work as great for me. Hope yours will be as excellent. Thanks and have a good day

  9. says

    Some coding tricks. Well, these days, the web developers are focusing on bloggers and I must say that this news will make bloggers happy. I’m going to nail the step by step tips here from you Baba. Thanks for the help about the sticky share.

    Your post has been shared on Kingged.com, IM social bookmarking site, enabling me to find this good piece.

  10. says

    Nice Babanature,
    I have just spotted some great importance of sticky share buttons after reading your post. Will try and put several and see the outcome because am hoping it is going to work for the best.
    Thanks, Laura.

  11. says

    Hey Babanature,

    As always you write a good post mate. Social media is very important as we all know. But many people still not aware power of social media. I personally want this kinda sticky bar and ready my self to apply this on my blog.

  12. says

    Hello,

    Nice tutorial and detailed indeed, I guess I’m gonna try this cool sticky share button for my new blogger blog.

    Thanks for share.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>