Nowadays lots of blogger are using strip ads . Since it catches the eyes of visitors. Blog Owners are selling ads in Strip navbar in Hundreds of Dollars.. Strip Navbar remains in the top or bottom of the page and is fixed even if you scroll throughout the page.. Its the best way to allow user to subscribe to your blog. It was firstly designed For wordpress but with little javascript you can add it in your blog
Find the tag ]]></b:skin> and paste the bellow code right above it
Now Find </head> and paste the bellow Code above it
Now Find </body> and paste the bellow code above it
Click Save Template and You are done
If You Want To strip ad on Top of Your Page . Just Add This css Code instead of the first code above that you added before ]]><b:skin>
N-JOY Blogging ...
How To add Strip ads in bottom of Your Blogger Site..
Login to Blogger
Go to Layout ---> Edit Html
#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/AVvXsEjAiyiWMoGyac6UPtd9bGy_EmqpEhW8SCrSdm7sF-VL23Tqn_OHsxvPLHknT8VztInQz_dmJ5e3eOFzv9Abs86LHDBg6KksFFiPFE54uwIi12dAJb4xpW5Z8N8_yr29NhRvTIKW6Bjb1xw/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }
Now Find </head> and paste the bellow Code above 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>
Now Find </body> and paste the bellow code above it
<div id='mta_bar'>Change the Blue Code Above with your rss Feeds and Text if you ant to show Subscribe Link. Or Change it to You Ad Code If You Want To Show Ads There..
<div id='left_bar'><span class='left'><a href='http://mallutips.blogspot.com/2009/10/show-beautifull-strip-ad-navbar-like.html' target='_blank'>Show Beautifull Strip Ad Navbar like Blogger Navbar Grab it here ?</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='mallutips.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPQ5xDZiH2Hi4Y6LPq1iRGc1B8PlXKmkHbodERc5PjX9jTx2BEfsm0CH80yYDeiFEoYzmMTXjbv45HQ1uua4C19p7PeWYD-5LLZ7DcAhrru79o6-brx1F1aoN7bLckn8UsTwyWxjA5z9A/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
Click Save Template and You are done
If You Want To strip ad on Top of Your Page . Just Add This css Code instead of the first code above that you added before ]]><b:skin>
#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; }
N-JOY Blogging ...
