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:
-
[a href="http://www.mybloggertricks.com/2011/09/make-sticky-bar-for-blogspot.html"]Create a StickyBar and add it to Top[/a]
-
[a href="http://www.mybloggertricks.com/2011/09/notification-bar-for-blogspot-with.html"]Add a StickyBar at Bottom of your page[/a]
-
[a href="http://www.mybloggertricks.com/2011/12/how-to-create-stickybar-with-button.html" target="_blank"]Add a Close Button To Stickybar[/a]
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,
/*MBT Stickybar*/
#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWrP_qOe_rpNUPDEmwmJxPBb0iYs3MtP1H2cz-Oinz_XeVppXJvA0NBFw_CBqnUznA_gJvM-M34lMD6QKdvQ4q1NELMaJqfjBICEq289m28RksMiGaDVHZ2of9sFvjuHgiwoUX-5uMp7w/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/AVvXsEh0f7j42-VVkRNVZD5aNG4ZNkDfRXf5ehnoXWpzXJYiHrMGXJDLoS1dK2N4HjtQZY9XGJYTCVaUorzjvQ2b0N-Upor-WHc0XmxgF4zYphqu-dQkmYrWrTuruJVmtLlJmskXe5ruTYN-4Ko/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. :)
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 [a href="http://www.mybloggertricks.com/2008/11/mbt-tools-tos.html" target="_blank"]tools[/a]. If you need any further help then please let me know. Peace and blessings brothers and sisters. :)
Post a Comment