HomeBlogger BlogspotBlogger TutorialsHow to Add Responsive Popup Splash Ads to Blogger

How to Add Responsive Popup Splash Ads to Blogger

Want to earn more with Google Adsense add responsive popup splash ads to blogger Blogspot. Since the existence of Google Adsense, it has served as the best monetization tools to earn extra bucks with your blog.

Today I will show you how to Add Responsive Popup Splash Ads to Blogger, to increase your ads earnings be it Adsense or other ads network.

>>>>> Read Also: How to Fix Adsense Loading Mixed Content on https Site

Follow the step-by-step guide below to successfully add responsive pop splash ads to blogger Blogspot.

How to Add Responsive Popup Splash Ads to Blogger

Step 1: Log in to your Dashboard

Step 2: Go to Layout –> Edit HTML

Step 3: Click anywhere inside the code area and to open a search box by pressing CTRL+F from the keyboard.

Step 4: Type or paste the following code into the search box and hit enter.

</body>

Step 5: Now Copy the following code and paste it before the above line:

Code:

<script>
$undefineddocument).readyundefinedfunctionundefined$) {
$undefined’.cb_splash_ads .close’).clickundefinedfunctionundefinedevent) {
event.preventDefaultundefined);
$undefined’.cb_splash_ads’).slideUpundefined’slow’);
});
});$undefinedwindow).loadundefinedfunctionundefined){
setTimeoutundefinedfunctionundefined){
$undefined’.cb_splash_ads’).slideUpundefined’slow’);
},3000);
});
</script>

Step 6: Again search the following code: <body>

Step 7: Now Copy the following code and paste it below the above line:

>>>>> Read Also: How to Remove Sora Template Footer Credit (Step by Step)

Code:

<!–Splash Popup Ads Start–>
<style>
/*********************************
** Name: Blogger Popup Splash Ads
** Created By www.geeksblogger.com
*********************************/
.cb_splash_ads {
background-color: rgbaundefined0,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 undefinedmax-width:768px){
.cb_splash_ads .pop {margin-top:25%;}
}
@media only screen and undefinedmax-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>
Paste your 300×250 Adsense ad code
</div>
</div>
<!–Splash Popup Ads End–>

Customization:

Step 8: Replace Paste your 300×250 Adsense ad code with your Google Adsense 300×250 banner ad code.

>>>>> Read Also: All In One SEO Pack for Blogger Blogspot 2020 Edition

Step 9: Click on Save template and you are done, You can also change the Automatic closing time limit, By Changing 3000 value from the above javascript code

=>If do love your visitors to manually close the Popup ads by clicking on the close icon. Kindly remove the following code from the above javascript code. That is all on How to Add Responsive Popup Splash Ads to Blogger, Hope you enjoyed reading it. Wish you all the Best. Do not forget to subscribe at our homepage.

Mathias Amodu
Mathias Amodu, Web Developer at Zealmat.com. 2018 NIRA Award winner for Youth Development, A Web Specialist, Blogger, Student, Son, A business Man.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular