Install stripe Ads like Blogger navbar

Today, I will give amazing tutorial, this widget is like Blogspot Navbar. But, you can specify your own, such as ads from Google AdSense or referral links, it will be cool widget. In Wordpress, the popular widget is Maxblogpress. You can install this stripe ads in your Blogspot right now :)

I know this tutorial from Agus Ramadhani. He is popular Blogger from Indonesia. He create useful widget for me and another Indonesia blogger.

And this is step by step how to install Stripe ads in Blogger :
1. Upload this Javascript code to your server like Google Pages. Copy and paste this code in Notepad in save as with name as Stript-ad.js

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";
}

Or you can download this Javascript here. And move it to your server.

2. Put this CSS code before </b:skin> code

#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; }

You can edit the color background or image background at this code.

3. Then put this code before </head> code

<script src='http://your server.com/Stripe-Ad.js,' type='text/javascript'/>

Change the red code with your URL server of Strip ad.js

4. And now, the widget code, put them after </body>. You can changes the link with your own. Referral links or RSS feed link .

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/stylecustom' target='_blank'><img src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'/>Subscribe now in Bloggercustom via RSS Feed!</a></span></div>

And Save your work. For example you can loke at the top of this blog.

---

You can add the close button on the stripe, but it not work well. The widget can't close. You can add this code after the widget code. Add the bold code. Place the following code like this.

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='<b>http://feeds.feedburner.com/stylecustom</b>' target='_blank'><img src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'/>Subscribe now in Bloggercustom via RSS Feed !</a></span></div><span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;bloggercustom.net.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://URL images server.com/close.gif' style='cursor:hand;cursor:pointer;'/></span></div>

If you have some trouble about this tutorial, you can leave comment here :D . Happy Blogging !

Related Posts by Categories

Widget by Hoctro | Jack Book |