Make fixed message or ad stripe for blogger

 100 % working - can't afford demo

Many bloggers and webmasters uses the javascript to make a bar just like a blogger's navbar which is not static and fixed. But now these strips come in static and fixed, as you scroll they also come by .They are also used for displaying google ads as they support any place they are in, making an illusion for the visitors as if it is a menu bar. You can also use it to convey messages you wanna tell them.  Please follow the steps given below with at-most concentration..

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.


Step 2: dashboard>> design >> Edit html > and search for  </b:skin>  all the css code comes between b:Skin

and Paste the code given below

#strip_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}

* html #strip_bar{

position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}

#strip_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#strip_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#strip_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#strip_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SRtNzbvDqPI/AAAAAAAAAXk/KxbvrpJ1DE4/ico-rss-trans_thumb%5B1%5D.png?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

Step 3: Immediately below </b:skin> or Above </head> paste the code given below,

<script type='text/javascript'>
//<![CDATA[
var strip_arr = new Array();
var strip_clear = new Array();
function stripFloat(strip) {
strip_arr[strip_arr.length] = this;
var strippointer = eval(strip_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.stripsrc = document.all? document.all[strip] : document.getElementById(strip);
this.stripsrc.height = this.stripsrc.offsetHeight;
this.stripheight = this.cmode.clientHeight;
this.stripoffset = stripGetOffsetY(strip_arr[strippointer]);
var stripbar = 'strip_clear['+strippointer+'] = setInterval("stripFloatInit(strip_arr['+strippointer+'])",1);';
stripbar = stripbar;
eval(stripbar);
}
function stripGetOffsetY(strip) {
var stripTotOffset = parseInt(strip.stripsrc.offsetTop);
var parentOffset = strip.stripsrc.offsetParent;
while ( parentOffset != null ) {
stripTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return stripTotOffset;
}
function stripFloatInit(strip) {
strip.pagetop = strip.cmode.scrollTop;
strip.stripsrc.style.top = strip.pagetop - strip.stripoffset + "px";
}
function closeTopAds() {
document.getElementById("strip_bar").style.visibility = "hidden";
}
//]]>
</script>

Step 4: finally paste this code above the </body>

<div id='strip_bar'>
<div id='left_bar'><span class='left'><a href='#' target='_blank'>Hello there</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;blogger-demo-wierdy.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://lh5.ggpht.com/_pt7i0nbIOCY/SRGg-N2bQ4I/AAAAAAAAAVE/pG-pTLXsMtc/close_thumb%5B1%5D.png?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Customization:
for ads,include your ad code right at <div id='left_bar'> and </div>

you can also make this strip to appear in the top, paste this code in above the </b:skin> rather than the first one..

#strip_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #strip_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#strip_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#strip_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#strip_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#strip_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

Demo, Click here

Thats it