Stript ads,how to make this stript to add functionality in blogger like navbar is showed at top in bloggers.You must have seen these stripe adds in many bloggers nowadays,as i when started blogging used to see that stripe add in johnchow blog and he use to sell that add for hundreds of dollars.This add will be shown at top of every page and is fixed add as we scroll it remains at same place.
Now i will tell you how to make this stripe ad to work in blogger, as it was designed as an wordpress plugin to be get used in wordpress blogs,but was based on javascipts,so it can be used by bloggers too as it we can use javascripts in bloggers becuse bloggers support javascrits.
Login into blogger with your ID
Click Layout
Click Edit HTML tab
Click Download Full Template and please back up your template first.
Find this piece of code
Click Layout
Click Edit HTML tab
Click Download Full Template and please back up your template first.
Find this piece of code
]]></b:skin>
immediately before that paste this code below
#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/AVvXsEjkgC0DdfxMgVjEwVX5psEU20fPxKTkSEWYOCt1vp6Vs37q3JjS9pCXArWIDeZovNHPmmu_tpCBckkOpN0LOWkU63Hg0u_tj_eNQLna5ue-d9ap5q0B17PuooOgQOWYkN1mkGlQAlr1VAQ/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }
Find this code in your template
</head>
and paste this code below before the code above.
<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>
finally right above this code
</body>
Paste this...
<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://widgetscorner.blogspot.com/2010/10/stript-addhow-to-make-this-stript-to.html' target='_blank'>How to add this srtipe add In blogger,Grab it here ?</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='Widgetscorner.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kQc8_pTTs6zs7baptB7wrM98FL_g3kYR67x5a9E_v1uBIvFRZZj4NnvqrPfr2zFuYcc68MYaiiiptPrdhenv7j47O0ecTo1HtsmDbxOl9jjcM8RXjOHqe_Oc93113HkCgc-kSMAz62s/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
Now if you want it to be shown ads above, replace the code you add above ]]></b:skin> with this one.
#mta_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 #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 { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }
