How to Add Responsive Popup Ads to Blogger

Posted by Android Flash Firmware on Tuesday, April 25, 2017

How to Add Ads to Blogger

Login to your blogger account
Go to Theme
Click on Edit HTML
Click anywhere inside the code area
Press Ctrl+F
Search following code

</body>

Paste following javascript code before </body> tags

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

Again search following code

<body>

Now paste following code after <body> tags

<!--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/AVvXsEg5gmiT-JqVi8PhiB9vQg9IEK5txoswdKEIY1gt8kw4mY8Cl88WC1yfMwb7EQnd_Bcx0O_DS5sI8yZRxnwpRWbVoCft9SMZqm_DFw9qGIj2z0-jq1N_pgdSSwVnOGfUgVUguAgA1l6I4qk/s1600/close.gif'/></a>
 Here paste your 300x250 banner ad code
  </div>
</div>
<!--Splash Popup Ads End-->

Here paste your 300x250 banner ad code

300x250

Click on Save template and you are done

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.

How to Add Responsive Popup Ads to Blogger

Posted by Android Flash Firmware on Tuesday, April 25, 2017

How to Add Ads to Blogger

Customize

0 comments:

Post a Comment

Popular Posts

Blog Archive

About Me