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

]]></b:skin>

     4.  Just above it paste the following CSS code,

/*MBT Stickybar*/

#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSKHztZpc_tpuh9BHXOkpRMI6JKUmyTr-xFPkOtFICCgbCM-Yk0y67cYXy8Jo2qHlJMlN2kf_HCx9ZBkseN600AqXCeJMfwC_iiP2AP5nWoXgnAthO1xofdYdRY2xM_iEhMTbUZidVN4/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
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;
color:#fff;
font-size:12px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#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'>
//<![CDATA[
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;
eval(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.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

   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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJe85eUg1-GdwrF-EdoldFNf9ozP7sP-u4BhKhGpBWba264JAvdHH_6riJh89QuxrfkPaOjqMPGTTya5Ns30OAtISVWXfFW3PE-A9MwZg7e9wIe7OTtAtHQvzDZDooKIvof9sXoC4GVI0/s400/cancel.png' 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='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggertricks&amp;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='http://www.mybloggertricks.com' 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='http://apis.google.com/js/plusone.js' 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. :)

Customize

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 »

43 comments

PLEASE NOTE:
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

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

    ReplyDelete
  3. Thanks For Such a Good Widget. :)

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

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

    Thanks

    ReplyDelete
  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

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

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

    ReplyDelete
  9. Close button is not working! need your Help
    www.linkstoweb.in

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

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

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

    @Admin @@abdulsalam @vishnu

    Most welcomed pals. :)

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

    ReplyDelete
  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 :-)
    www.linkstoweb.in

    ReplyDelete
  13. NOt working for me did't appear background color and image how ?
    at http://bit.ly/rBoqy4

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

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

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

    ReplyDelete
  17. hi admin
    nice article
    www.mycsestuff.blogspot.com

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

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

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

    ReplyDelete
  21. Yogen Basnet on 9:21 PM, March 17, 2012
    yES ON YHIS DAY I HAD ASKED YOU FOR A HELP ON CLOSE BUTTON.......STILL WAITING....

    ReplyDelete
  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:
    http://4.bp.blogspot.com/-0NgGaPuaAxo/T3s5mv7wySI/AAAAAAAAAi4/yNqv3F54l2A/s1600/offset.jpg

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

    http://3.bp.blogspot.com/-HFWGSZqllzo/T3x9lZ3XdRI/AAAAAAAAAjE/AiDrEYbvrXw/s1600/g%252B.jpg

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

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

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

    Thanks

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

    ReplyDelete
  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

    http://djboysz.blogspot.com


    why the bar is so like this

    plz solve this problem

    many of your blog posts does not work for mbt church

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

    ReplyDelete
  27. This comment has been removed by the author.

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

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

    My Blog : http://www.youthgarden.in

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

    Thank You : http://www.youthgarden.in

    ReplyDelete
  30. "Close Mark" Solved.

    Find below code

    nClick='closeTopAdsundefined)

    and Replace with this code

    onClick='closeTopAds()

    ReplyDelete
  31. great widget brother .

    ReplyDelete
  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.
    Thanks…:)

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

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

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

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

    ReplyDelete