Thursday, 23 August 2012

Add Goolge Adsense popup box Style2 in blogger.

Hello Friends this popup box very cute and it has auto sliding feature with smooth close button.
Follow simple and easy step to adding this special adsense bx in blogger ----->>>> * First go to your blogger Dashboard.
* Now click in Design tab and edit HTML.
* Click in small box to expand your blogger Template.
* After above step find this code </head> by CTRL+F key.
* Copy below code and paste before </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>  
  jQuery(document).ready(function() {

   function on_Scroll_Resize()  {
    var wh = jQuery(window).height();
    var pph = jQuery("#popupslider").height();
    var fromTop = jQuery(window).scrollTop()+50;
    
    jQuery("#popupslider").css({"top":fromTop});
   }

  jQuery(window)
        .scroll(on_Scroll_Resize)
        .resize(on_Scroll_Resize)



    //alert(jQuery.cookie('sreqshown'));
 
       //var ww = jQuery(window).width();
       //var ppw = jQuery("#popupslider").width();
       //var leftm = (ww-ppw)/2;
       var leftm = 0;

       //var wh = jQuery(window).height();
       //var pph = jQuery("#popupslider").height();
       //var fromTop = (jQuery(window).scrollTop()+wh-pph) / 2;

       jQuery("#popupslider").animate({opacity: "1", left: "0" , left: leftm}, 1000).show();        


   jQuery("#closepp").click(function() {
     jQuery("#popupslider").animate({opacity: "0", left: "-300"}, 1000).show();
   });

});
</script>
* Now click To save your blogger Template.
* Again go to your blogger Dashboard and click in design tab.
* Now you are here ---->>>> PAge Element.
* Click in Add Gadget which is your blog sidebar.
* Now when open new window click in HTML/javascript from list.
* When open new blank box copy below code and paste in blank box without any title.
<b:if cond='data:blog.pagetype == 'item'>
<div
id="popupslider" style="position: absolute;width:250px;height:280px;background:#222;top:50px;border:1px solid #929292;z-index:999;display:none;padding:10px;left:-300px;">
<p style="font-size:12px;font-weight:bold;color:green!important;"><a  style="color:#00FF00!important;"> Promotions </a> 
<a href="#" id="closepp" style="color:red!important;" onclick="return false;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBPWBvu6lOu49SiHXuMmuENVP_ahPJD5YwSnSRx0XgA3sLhfxHbjWYN_590QxrXGuKXMPDyk9QB49Wpp84gRbjqTgaW72zR5RFplIrZ0waSvKyen5HhyphenhyphenFjsrro8zgtiH6bdvwmxi7NadA/s1600/close+2.png" align="right" /> </a></p>

ADD HERE YOUR 250x250 Adsense code
<center><a href="ADD HERE YOUR FEEDBURNER URL" title="Subscribe To Our Rss Feed"><img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPRdoAX0I1wDUqoYa6ch_VNxkiP9Urd7VnwYOgx9C1506oX5NGPTP8WwjOSoBHxhQkcNu-mChAYyYJ3FR9_POzZGgHg9zCe3eX_ub04zuDEPbqcK-Mj_debe0cKO2XvDZTDE2BBFndgrx/s320/subscribe-rss-green.jpg"/></a></center></div
id="popupslider">
</b:if>
</div>
<div class='clear'></div>

NOTE:- Remove Highlighted text in above code with your own and your feeburner url ok
                   Your Adsense size should be width-250 and hieght-250 ok

No comments: