How to Add Splash Ads to Blogger

by TECH Poison

Tuesday, July 31, 2018

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: 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFLXZOU_MN6fk8UsNe-3OE0Z9SvLhbdp4RUCWOfJ6eBfO06pC0vY2PK2DmkUFjFxEkfwW2GplrCMccLHYIa_v2FE_ynuUSdyQ-BBtXvWXCF_hyE3mf643fEyeCx_NBVdjnxaRgt3sebo/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.

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!

How to Add Splash Ads to Blogger

Customize

TECH Poison

Post a Comment

[GUIDE] How to Root OnePlus 8 Pro without TWRP

Tech Poison

#buttons=(Accept !) #days=(20)

Contact form

How to Add Splash Ads to Blogger

Customize

TECH Poison

You may like these posts

Post a Comment

#buttons=(Accept !) #days=(20)

Contact form