Had your blogger or website holds offers,contests and any announcements.Making these type of announcements in blogger at sidebars make the visitors to thought heavy ad serving in this sites.Better to display your announcements,offers or any other your favorite information about your posts at the sticky bar which present at the top or bottom of your blogger with close button option.To add a sticky bar follow this steps
part1
Go to blogger->>Design or Template->>Edit Html
Search for the code ]]></b:skin>
add below code above ]]></b:skin>
#mmb_bar{
background:#333 url('http://i1114.photobucket.com/albums/k536/santoshpole/stickybar-1.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;
}
#mmb_bar a{
text-decoration:underline;
color:#E2E504;
}
#mmb_bar a:hover{
text-decoration:none;
}
#mmb_bar p {margin:0; list-style:none;}
#mmb_bar img {vertical-align: middle;
margin-right: 6px;}
Part2background:#333 url('http://i1114.photobucket.com/albums/k536/santoshpole/stickybar-1.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;
}
#mmb_bar a{
text-decoration:underline;
color:#E2E504;
}
#mmb_bar a:hover{
text-decoration:none;
}
#mmb_bar p {margin:0; list-style:none;}
#mmb_bar img {vertical-align: middle;
margin-right: 6px;}
search for the code </head> and paste the below code above it.
<script type='text/javascript'>
//<![CDATA[
var mmb_arr = new Array();
var mmb_clear = new Array();
function mmbFloat(mmb) {
mmb_arr[mmb_arr.length] = this;
var mmbpointer = eval(mmb_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mmbsrc = document.all? document.all[mmb] : document.getElementById(mmb);
this.mmbsrc.height = this.mmbsrc.offsetHeight;
this.mmbheight = this.cmode.clientHeight;
this.mmboffset = mmbGetOffsetY(mmb_arr[mmbpointer]);
var mmbbar = 'mmb_clear['+mmbpointer+'] = setInterval("mmbFloatInit(mmb_arr['+mmbpointer+'])",1);';
mmbbar = mmbbar;
eval(mmbbar);
}
function mmbGetOffsetY(mmb) {
var mtaTotOffset = parseInt(mmb.mmbsrc.offsetTop);
var parentOffset = mmb.mmbsrc.offsetParent;
while ( parentOffset != null ) {
mmbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mmbTotOffset;
}
function mmbFloatInit(mmb) {
mmb.pagetop = mmb.cmode.scrollTop;
mmb.mmbsrc.style.top = mmb.pagetop - mmb.mmboffset + "px";
}
function closeTopAds() {
document.getElementById("mmb_bar").style.visibility = "hidden";
}
//]]>
</script>
Part3//<![CDATA[
var mmb_arr = new Array();
var mmb_clear = new Array();
function mmbFloat(mmb) {
mmb_arr[mmb_arr.length] = this;
var mmbpointer = eval(mmb_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mmbsrc = document.all? document.all[mmb] : document.getElementById(mmb);
this.mmbsrc.height = this.mmbsrc.offsetHeight;
this.mmbheight = this.cmode.clientHeight;
this.mmboffset = mmbGetOffsetY(mmb_arr[mmbpointer]);
var mmbbar = 'mmb_clear['+mmbpointer+'] = setInterval("mmbFloatInit(mmb_arr['+mmbpointer+'])",1);';
mmbbar = mmbbar;
eval(mmbbar);
}
function mmbGetOffsetY(mmb) {
var mtaTotOffset = parseInt(mmb.mmbsrc.offsetTop);
var parentOffset = mmb.mmbsrc.offsetParent;
while ( parentOffset != null ) {
mmbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mmbTotOffset;
}
function mmbFloatInit(mmb) {
mmb.pagetop = mmb.cmode.scrollTop;
mmb.mmbsrc.style.top = mmb.pagetop - mmb.mmboffset + "px";
}
function closeTopAds() {
document.getElementById("mmb_bar").style.visibility = "hidden";
}
//]]>
</script>
Now search for the code <body>
paste the below code below <body>
<div id='mmb_bar'> add text here<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://i1114.photobucket.com/albums/k536/santoshpole/th_cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>
save template and you are done.<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://i1114.photobucket.com/albums/k536/santoshpole/th_cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>