Tuesday, 25 April 2017

How to Add Responsive Popup Ads to Blogger

       No comments

How to Add Ads to Blogger

Image result for How to Add Responsive Popup Ads to Blogger

  1. Login to your blogger account
  2. Go to Theme
  3. Click on Edit HTML
  4. Click anywhere inside the code area
  5. Press Ctrl+F
  6. Search following code
    7. </body>
  7. Paste following javascript code before </body> tags
    8. <script>
    $(document).ready(function($) {
        $('.cb_splash_ads .close').click(function(event) {
            event.preventDefault();
            $('.cb_splash_ads').slideUp('slow');
        });
    });

    $(window).load(function(){
        setTimeout(function(){
            $('.cb_splash_ads').slideUp('slow');
        },3000);
    });
</script>
  8. Again search following code
    9. <body>
  9. Now paste following code after <body> tags
    10. <!--Splash Popup Ads Start-->
<style>
/*********************************
** Name: Blogger Popup Splash Ads
** Created By: trickzbuzz.blogspot.in
*********************************/
.cb_splash_ads {
    background-color: rgba(0,0,0,0.8);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}
.cb_splash_ads .pop {
    background-color: #fff;
    margin: 10% auto 0;
    padding: 5px;
    position: relative;
    max-width: 300px;
}
.cb_splash_ads .pop img {
    width: 100%;
 vertical-align: middle;
}
.cb_splash_ads .close {
    opacity: 1;
    position: absolute;
    right: -9px;
    top: -9px;
}
.cb_splash_ads .close img {
    height: 32px;
    width: 32px;
}
@media only screen and (max-width:768px){
    .cb_splash_ads .pop {margin-top:25%;}
  }
@media only screen and (max-width:320px){
    .cb_splash_ads .pop {margin: 25% 3% 0;}
  }
</style>

<div class='cb_splash_ads'>
  <div class='pop'>
 <a class='close' href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLAOZgR0EWKZ-umcf6v4h7FlTmGIq4uHF-HADyZ0HCtOod3gO6tF1E74xLYQAMkzJ_PT75vJ3clfZaCr7zTCMQrSLznH05reBZVTYQl5mekEeLpIdsMEEOEV84SnwSX6bg088uMQ6Xhwg/s1600/close.gif'/></a>
 Here paste your 300x250 banner ad code
  </div>
</div>
<!--Splash Popup Ads End-->
    Replace Here paste your 300x250 banner ad code with your AdSense or other platform 300x250 banner ad code.
  10. Click on Save template and you are done

Read also:

Customize

- If you want to change automatic closing time limit, you can do it by changing 3000 value from above javascript code.
- If you want your visitor's manually close popup ads by clicking on a close icon, remove following code from above javascript code.
    $(window).load(function(){
        setTimeout(function(){
            $('.cb_splash_ads').slideUp('slow');
        },3000);
    });
That's it.

0 comments:

Post a Comment