Add Stript ad in Blogspot Tutorial

Add Stript ad in Blogger Tutorial

If you like blogging with wordpress engine, I believe that you are familiar with a plugin called Stript ad which is created by MaxBlogPress. With this Stript ad plugin, you can deliver the important message for your blog visitors. Now, can we use stript ad plugin in blogger? Don’t’ worry, because we do it because stript ad plugin use JavaScript which means that we can add it in blogger or blogspot.

One of implementation that I have applied is the message to subscribe the feed as you can see at the bottom of this blog:

If you are interested in adding this plugin in your blog, just read the guidance below;

1. Login into blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Click Download Full Template and please back up your template first.
5. Copy and Paste the following 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/AVvXsEiq0P44R1zI5ruYab7Y6Uhr3o5yDum5HUFjmmHzNnqo8HCwQ0fS7gnDDtk84pcRx4vV9_97IeGWRQO6fMfPzHswBjt1jB-DEiev5dduVx7hM0NkuHR3gU2J2MJ1CQHHZrb5pJaJHEY7pzY/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
   #left_bar a:hover { text-decoration: underline; color: #fff; }

   
   
   

   
   



6. Find this code </head> in your template



7. 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>

   
   



8. find this code </body> in your template ( end of template code)



9. Copy and paste the following code right above </body> (sample only : change the red mark with your’s)
   
   

   <div id='mta_bar'>
   
   <div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/BlogspotTutorial' target='_blank'>More than 300 have subcribed in readers, have you?</a></span></div>
   
   
   <span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;blogspottutorial.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrLnEx0fYb2YVqAm7GZxx-rTop2qxrWBCYi9oVgA7B3Qt4-vTjLXSf9r7-IxdVXf3W5CEKsDezHkaWM-7uL2LPR48gqPOWQqfOqQ8mhVPGNbXrl04tkPWv5y86rshs8Ux809m6t-2j2c/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

   
   
   



10. Click Save template



11. Finish and see the result.

For wordpress self hosting user, you can download strips ad plugin directly in MaxBlogPress.

Thanks to my friend OOm for this trick

Have a nice trying!!