Friday, May 1, 2009

I am interested to use this kind of Stript Ads (Stript Ads Sample) for it can be effective to publish things in our blog. We can show our Ads or something important to publish by using this tool. Tips of Blog will show how to add this tool easily.

I thank to Anshuldudeja blog because I got this tool from that blog. I try to show this tool at my other blog, The Biography of History Makers, and it work well.

Alright, Here is some steps to put this stript on your blog.
  1. Login into your blogger with your ID
  2. Click Layout
  3. Click Edit HTML
  4. Click Download Full Template to back up your template.
  5. Copy and Paste the following CSS code right above ]]><b:skin>

#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cg4hGB9AcMRmo-eNHn9VLcNXs15dC8BFJjWzNghm3lHNhguYdNR4gXRaslERBga7XwCnD4uPjTdsLx30s9qQJBd2hHeBzi5BPyVAhrYe3hhEO4zX3n3aixUQWzGf3V_IWzhosUoajSc/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

Then find the code </head> in your template and Copy Paste the code below right above code </head>

<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>
And the last, Find the code <body> in your template and Copy Paste the following code right under <body>
<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://tips-ofblog.blogspot.com' target='_blank'>Tips of Blog</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;tips-ofblog.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAPy_M0HPf1Zmuiq6M11sOkqGleJMKR2E95oPjfXV0edenLMNFzFsopl4eQcfvakfBu5ZDVb0aczrf9lynpztrZh_trfezfAWuvJI-yrrn-prmTffyfs-w5lR1apPz7PxDPfVRQZc6nA/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
Change the lines in Red above codes with yours rss feeds and url and text you want to show.
After that, Click Save template and see the result.

Good Luck !

0 comments

Post a Comment

 


Disclaimer:We does not host any of the templates available on this blog. This blog merely indexes other sites contents.