0


  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


    </body>
  1. Paste following javascript code before </body> tags
  2. <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>
  3. Again search following code
  4. <body>
  5. Now paste following code after <body> tags
  6. <!--Splash Popup Ads Start-->
    <style>
    /*********************************
    ** Name: Blogger Popup Splash Ads
    ** Created By: www.techpoison.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://4.bp.blogspot.com/-gqmCHgeS4yI/WJAeuIucjdI/AAAAAAAAEmU/xdFdp6UkMGkP5YQKfPIA6FVkr8rhjh0KQCLcB/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.
  7. Click on Save template and you are done

Customize


- If you want to change automatic closing time limit, you can do it by changing the 3000 value from above javascript code.
- If you want your visitors' 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. I think that you enjoyed my tutorial. Happy Commenting!

Post a Comment

 
Top