Hi Friends i have founded a new sticky bar for blogger with close message or button.This is a new kind of sticky bar.Many webmaster have search for this.Today i will let you that how to apply it on a blog/website.While viewing one of the Wordpress Blogs I found this button next to their updates bar. I managed somehow to fetch the script half broken. Making it work with blogger template was difficult because blogspot templates are programmed via XML and the rules of XML are really harsh when it comes to Character case. Debugging the script was difficult but Alhamdulillah the hard work paid off. You can see it Live just to the right of my Stickybar at the top. I am excited to share it with you all. Lets get to work!
4. Just above it paste the following CSS code,
5. 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. Finally search for <body> and just below it paste the following HTML code
<div id='mbt_bar'> WRITE YOUR TEXT HERE
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalQ1Mdrpeo5NW5VSrXDKVeGMRCCraZQJ6Gi7W2srAHhhgOAFr2UXCc8es4Dzsn6c0f2rmjvCyO11nfKiRYFYCIVoOaaXmvcQwD8yX7AJQ6vTub6nwGrtm8DVdr9uIEXQWIfKl_baELv8/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>
To write any updates or anythig, just replace the Green highlighted text with your message. If you wish to change the Close button image then simply replace the bolded black link with your button's link.
7. Save your template
8. You are all done!
Steps To Create Sticky Bar.
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_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIoHDM3XLojZzLETaHvmhLRMQ4xob-Vb_yppzxgWAFKq2KxeS8TmL1gY_ie2L9I7ZHI9Qp3Vc9bYx_JF3dK-dGs3u6xG4kvjWrYuACLGG8ivgWkS7YYRSkIzQmOdDhv0bjAdhnLz5p-U/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 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:13px;
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;}
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIoHDM3XLojZzLETaHvmhLRMQ4xob-Vb_yppzxgWAFKq2KxeS8TmL1gY_ie2L9I7ZHI9Qp3Vc9bYx_JF3dK-dGs3u6xG4kvjWrYuACLGG8ivgWkS7YYRSkIzQmOdDhv0bjAdhnLz5p-U/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 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:13px;
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;}
5. 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. Finally search for <body> and just below it paste the following HTML code
<div id='mbt_bar'> WRITE YOUR TEXT HERE
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalQ1Mdrpeo5NW5VSrXDKVeGMRCCraZQJ6Gi7W2srAHhhgOAFr2UXCc8es4Dzsn6c0f2rmjvCyO11nfKiRYFYCIVoOaaXmvcQwD8yX7AJQ6vTub6nwGrtm8DVdr9uIEXQWIfKl_baELv8/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>
To write any updates or anythig, just replace the Green highlighted text with your message. If you wish to change the Close button image then simply replace the bolded black link with your button's link.
7. Save your template
8. You are all done!
Visit your blog to see it fixed to the top just beautifully with a close button waiting to be clicked!
0 comments: