Add Goolge Adsense popup box Style2 in blogger. 0

| | , ,

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="http://1.bp.blogspot.com/-qa5_ssCH9Vc/Tfdm8jaVPvI/AAAAAAAAAkA/QR16Tg6zfjw/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 = "http://1.bp.blogspot.com/-w2B6l-Ct4tI/TfeH0z7FzLI/AAAAAAAAAkQ/VpZH--ctK3M/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

* Now click to save your HTML/javascript code and now you are done.CHEERS

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Add Goolge Adsense popup box Style2 in blogger. ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories