StickyBar With Facebook Like and Google+ Button

stickybar for bloggerThe previous version of sticky were well entertained and some of you asked how to add Facebook like button and Google Plus button to the stickybar. If you have already added the sticky bar then you just need to make few changes to your old code. Only step#6 is different else all styling and HTML is the same which we used in our previous tutorials else you can try these new codes from start and delete the previous one. MBT's Stickybar is just a custom version of hello bar but it has no Ads and can easily be styled and customized to blend your blog template. Since it is always better to have your own custom widgets therefore we designed this easy bar which sticks to the top of your blog or website to grab the attention of all visitors. Both these social plugins would help you increase your fan following. The Facebook like button will be linked to your fan page so that any like may turn out into a Fan. Lets get to work then!

Add Stickybar to Blogger

If you are new here then kindly read my previous versions first so that you may have a clear idea on how this widget works and how can you customize it. Kindly have a look at them:

Follow these easy steps:

  1. Go To Blogger > Design > Edit HTML

  2. Backup your template

  3. Search for this


     4.  Just above it paste the following CSS code,

/*MBT Stickybar*/

background:#0080ff url('') repeat-x;
margin:0 auto;
padding:3px 0 0 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
font-family: arial,"Helvetica",sans-serif;
#mbt_bar a{
#mbt_bar a:hover{
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
      margin-right: 6px;}


Next search for </head>   and paste the following Javascript code just above it

<script type='text/javascript'>
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
return mbtTotOffset;
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop; = mbt.pagetop - mbt.mbtoffset + "px";
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";

   6.     Then search for <body>  and just below it paste the following HTML code

<div id='mbt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with social Plugins</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src=';send=false&amp;layout=button_count&amp;width=80&amp; show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='' size='medium'/> </div> </div>


You can write your message, announcement, anything you like instead of that purple text.

Replace blogger tricks with your Facebook Fan Page Username  and replace our blog link with yours.

     7.  Note: Skip this step if you have already added google+ button somewhere already in your blog.

Paste the following code just below ]]></b:skin>

<script src='' type='text/javascript'> {lang: &#39;en-US&#39;} </script>



     8. Save your template and you are all done!

Visit your blogs to see it fixed at top just perfectly. :)


To change the background color of the bar simply edit #0080ff  in step#4 with a color of your choice. Try our color generator tools. If you need any further help then please let me know. Peace and blessings brothers and sisters. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. hmmm nice One ...............

    I did it in my way but unprofessionally :p

  2. If have tweet button more cool.... ^_^

  3. Thanks For Such a Good Widget. :)

  4. itna HTML code denesey to website loading slow ho jaga.

  5. when i click on the close button on my blog it still shows the Google+ button. Plz guide. wwwdotindiacoupons4alldotblogspotdotcom


  6. Nice post, it helped me a lot
    can u plzz tell me how to create the Blogger template, is there any software available for it

  7. Hai Admin can you plus tweet button? ^_^

  8. I'm new to your blog and now a days i am surfing on you blog everyday, liked your way of presentation,and your word "Peace".

    may Allah bless you with peace, prosperity and abundance.

  9. Close button is not working! need your Help

  10. @prince
    It wont effect the loading time because the script is negligible in size and doesn't request several calls. :)

    For that I will need to contact Google ( :) ) with their troublesome ApI. +1 still needs development buddy.

    You are always welcomed here brother. Pleased with your comment. :)

    @Admin @@abdulsalam @vishnu

    Most welcomed pals. :)

  11. nice info keep it up, could you tell me one thing why some commentators link appear in green.

    exa: Prince ,Oguntayo Mathew AdeKunle,egyhacks.

  12. @vishnu aniyan

    I fixed the problem with help of your earlier post ( How to Create a Stickybar with "Close Button"?)
    it is Now working fine :-)

  13. NOt working for me did't appear background color and image how ?

  14. how to add rolling feeds on this sticky bar??

  15. T_T why my stickybar cant close, mustafa help me please...

  16. Heyy, another nice work,
    I put it to the bottom because it was blocking my page list widget.

    Is there any way to add total post count(number) script to the sticky bar? I am sure it will provide an impressive view regarding how the blog is growing on regular visitors eye.

    Kind Regards,

  17. hi admin
    nice article

  18. how to fix it at the top of the page,i am not getting at the top of the page

  19. Thanks a lot of hardship in providing us with this hack. Unfortunately the close button is not working. I tried several times but became unsuccessful in this. Kindly Help me out with the close button in this script.

  20. Great it is working , except for the close button.

  21. Yogen Basnet on 9:21 PM, March 17, 2012

  22. 1- my sticky bar isn't positioned on the top (see the link)
    2- g+ button is positioned lower than the bar itself (see the link)

    [I tried adding "padding-top" :D but no success]

    Link to the picture:

  23. One more query:

    I used your "g:plusone" code and script (both from this post) to place a g+ button at the end of my navigation bar (see the link)

    The thing is, it's only appearing on my home page :/

    I want it to show on every page (posts' page) [like yours]

  24. ^ oops. My bad. "g:plusone" seems to be working fine. :/
    i guess it was my internet connection before. I actually embedded the button in nav bar which is a fixed thing (and not "data:blog.pageType") so I was pretty confident that it WILL show up on every page (and post). Im glad that I was right :)

    Please resolve my query # 1 though (comment # 27)


    p.s. btw your blog resides in my sidebar (under "friends" list)

  25. dear Mohammad Mustafa Ahmedzai

    thankz for ur post

    but while applying this on mbt church templete its not working correctly its pointing sligthly to right

    look here

    why the bar is so like this

    plz solve this problem

    many of your blog posts does not work for mbt church

  26. Close Button Not Working How To Fix ???

  27. This comment has been removed by the author.

  28. Very Nice Tut Mohammad Bro.But would be nice if you add info about adding it to bottom.
    Anyway Thanks A Lot !

  29. I am Added It To My Blog. But, "Close Mark" In Stickybar Was Not Working..

    My Blog :

    Please Tell Me..How To Enable Close Mark For Stickybar.

    Thank You :

  30. "Close Mark" Solved.

    Find below code


    and Replace with this code


  31. great widget brother .

  32. Nice information you’ve posted Fobble Up! Always Up!
    Thanks for posting good Article Software
    Your post is very useful Blog Tips and tricks I will surely
    like and join ur site in future, be in adding good posts to ur site. peace and blessings.

  33. hey admin, dnt noe y but the script doesnt work for me
    (COULDNT FINT THE "(bracket)body>" AS WELL SO PASTED BELOW "(bracket)/body>)

  34. But dear this is impacting our site logo because it is coming upon the logo

  35. Really very informative content is here, thanks for sharing such info.
    hacker un compte facebook

  36. This is a great post; it was very edifying. I look ahead in reading more of your work.bubblegum casting