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. 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:- Create a StickyBar and add it to Top
- Add a StickyBar at Bottom of your page
- Add a Close Button To Stickybar
- Go To Blogger > Design > Edit HTML
- Backup your template
- Search for this
]]></b:skin>4. Just above it paste the following CSS code,
/*MBT Stickybar*/Next search for </head> and paste the following Javascript code just above it
#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_YvY1xVfb3JTsj8e5jowDK8kksrcy-jlPPEudplModpAR_239VAT9VA1CaOpDQDvPd-8L1chZIRopmb8GZk2_pC3aXbNh8jjtWSIaVZfELkkaZU9R_GLgcGEvgSEdQkgTI-575NEhoWI/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;}
<script type='text/javascript'>6. Then search for <body> and just below it paste the following HTML code
//<![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>
<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/AVvXsEg29bj1yk6obRGkLzn6x9_kHBzeukRhGY2YxZIMqtBk0pb-TAJS66zyEGMAgFBPi06D0AUwgglgjrCaAJvHn-dIIBl1dZbTv5ITdnLaxA07el-FTcbGT8HaqDOD74jWW56yd2JqRFx_thc/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&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://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: 'en-US'} </script>
8. Save your template and you are all done!
Visit your blogs to see it fixed at top just perfectly. :)