How To Place A Sticky Bar With Facebook Like Button

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

Follow these easy steps:

Go To Blogger > Design > Edit HTML
Backup your template
Search for this

]]></b:skin>

4. Just above it paste the following CSS code,

/*Stickybar*/
#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhINBPA6PD1IzSMNUZiEjIPJw8YMo99C7bmyKz5BG-_o1fxkeVuTlpMuj-0Aw38sjzUEWWSeJu7E0GQE0ko5yCvTjLVBCEx7qcIa37Gz5kpK4FJqpHEWzFAaFPsngmwUJuh2L9R0aqwDTI/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>

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/AVvXsEio4PMTR-rxCpW9YuAS0dD5TghzyOgEqB9USkhpeA2CH3eFCU_VFA77GjCwFMim0DKHPz9NV4oKWg6U-7UhQmXRX2D4bl0lLRvr6kZEscdJ0gbGCBN-Q6I3x_-hsWc_tMvB_QbWT4rd3AM/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%2Ftrucosdeblogger&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://tricksblogspot.blogspot.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.
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: 'en-US'} </script>

8. Save your template and you are all done! Visit your blogs to see it fixed at top just perfectly