2009/02/28

Create a "little noticed bar" beneath the screen(Strip Ad)

If you see the Word Press blog, you will see a plugin called Strip Ad created by MaxBlogPress.This plugin will bring you a little notice to readers.It's so cool, can you see it on my blog ? I use it to link to my feed, so it can invite much readers to subcribe your feed!

Oh right I am sure you are very interesting in this tip, how to add it to your blog ?
Before you do follow this tip please click follow me , subcribe my blog , link to my blog..Cos I have spent much time to find out this tip and fix it many times to have a perfect code.
Thank you guys!

This is the image of the blogger strip ad:


1.Login your account in Blogger > Layout > Edit HTML ( not need to click Expand Widget Template).

2.Find this code ]]></b:skin> and add this whole code below before it :

<style type="text/css">
#mta_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 #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_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;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_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; }
</style>



3.Next find </head> and add whole code below before it :
<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>


4.Finally , find </body> and add whole code below before it(by this last code you can option by the red code,this is my blog code):

<div id='mta_bar'>
<div id='left_bar'><a href='http://feeds2.feedburner.com/zenplate' target='_blank'>Over 2000 people submitted to receive my daily post by RSS, what about you?Click here to subscribe now!</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='zenplate.blogspot.com';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>


Ok it's done, save and join , if you success don't forget me.
If you like this kind of bar you can view another tip here ( this is a sidebar-very cool ,too).
Link back to me!
Thank you and good luck

12 comments:

Gin-Da The Breakthru' said...

NICE TIPS...

but, what is the function??

Gin-Da The Breakthru' said...

nice tips..

and what is the function?

thank u

vuluganck said...

what do you mean Gin-Da?

vuluganck said...

you can use it like my blog, or use it for contact(mail..), or subcribe feed , notice visitors, news....up to you

Sunny said...

 Very good!!!

Ericeiras said...

yeah...you misspelled receive...

Preethi said...

am getting this error..
please help me..
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "

Preethi said...

please am not able to Create a "little noticed bar" beneath the screen(Strip Ad) ..please help me..

it says as

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "

please mail me what to do "akreethi@gmail.com"

vuluganck said...

which code ? can you tell me which code when you add and you have that error message? I will help you

Umakant Chaudhari said...

well me to also getting the same errors as preethi

vuluganck said...

OK let me check it this noon, maybe the wrong was a little wrong here.Sorry about that and please come back at next 7 hours.

vuluganck said...

I have fixed the error, now you can try it again.Thanks much guys

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.