Post Tags

Blogger Widget

Pretty posts

By Rubel
Popup Splash Ads Responsive
Most of my blogger templates buyers requested me how they can add splash ads or popup ads in their website. Splash ads is a full page ad that is displayed immediately after the page loads. It actually designed for mobile but my splash ads is responsive that means it will support both desktop and mobile.

View Demo 1 View Demo 2

How to Add Splash 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: www.codiblog.com
*********************************/
.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/AVvXsEh3MWW0J6HX3PGrh4E4CXZ4QjYgWxatNFtj6T1Y_655VQraRaKyD3W56p4eG8zoNdASotXhn-yU7LUpALd-Slh5_zrCpITNxKB6IrEUr3qMh2sHA54MG_hnc5fXgWRhsdhw2wBsQ1GRc4Q/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: Adsense: How to Add Sticky and Full Screen Ads in Blogger

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 visitors manually close popup ads by clicking on close icon, remove following code from above javascript code.
    $(window).load(function(){
        setTimeout(function(){
            $('.cb_splash_ads').slideUp('slow');
        },3000);
    });
That's it. I think that you enjoyed my tutorial. Happy Commenting!