Stript add,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.(See in 99blogger.com)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.
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/AVvXsEhQW5hBJOMdKNjjv7371s9hHJHMlMdQda38ryqDUUNVhgXArHV4ywnUa103dd0Cft1600koMLCdMO2nbNbDntLeOJ2bXZu8ISm2A7Y0i6O61b5Y-jccYs6pHfaHJdFgF6I-1EoAAWPOIws/?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 </head> in your template
Copy and paste the following code right above </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>
Find this code </body> in your template ( end of template code)
Copy and paste the following code right above </body>
<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://www.99blogger.com/2011/07/essential-setting-after-you-install.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='99blogger.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQ_XocPRsllDdnSkYAZEPZYhQkb1UeEMOU0ii6wwdaOLYrmTVoFpV56M9FNvHH88cxdv5QsBZCLYni2kLJ7VM5KvycBGjWbv4s0t9ybAsP1lfAudfpd4YTRww0sQrCMfVaDF3bcKHBAs/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
Chnage the lines in green in above codes with yours rss feeds and url and text you want to show.
You can advertise also just by putting any add url and text to it by changing green lines in above codes.
Click Save template
Finish and see the result.
Now when you will see the result the stripe will be shown at the below of your page bottom like this in the blog.Check here for Stripe add demo hack for blogger here.
Now some people want to add this stripe at the top of the page where navbar is shown like this add stripe shown in my another blogger widgets blog.
Now if you want it to be shown above like i shown just above in demo site add below css to your blogger above ]]><b:skin> in place of the css you added to show stripe add below the page.
#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; }
As using this css in place of above css you added as at the beginning of the tutorial not only will show the ad stripe at the top but the design is too different.
I will tell you just one css property in codes to show the stripe at the bottom or the top of the page.
In above codes you will see i have made the word top highlighted in red.Just change it to bottom to show it at bottom of page.thats it.You have done.
I hope now you would have no problem in installing this stripe ad in top and bottom of the blogger.If you have any problem leave your comments i will sort it out.
Source:-o-om.com
For Further Reading,
0 comments:
Post a Comment