Add Popup Download Button with Ads and Countdown in Blogger [100% Working]

This article will help all Blogger publishers to increase their revenue by adding the Popup Download Button with Ads and Countdown Timer in Blogger Post with the help of a little code and knowledge of HTML, CSS, and JS.

Here you will learn How to add Popup Download Button with Ads and Countdown Timer in your Blogger template or Blogger post by using simple HTML, CSS, and Small code of Javascript. you need to follow the given steps and make a few changes to the given template of code to personalize them for your blogger template.

On the internet, you will find the same kinds of articles with similar code but lots of bugs and errors in the code. So that I keep this code template simple and easy to understand.

What’s New in Popup Download Button with Ads

I added some features in this code and removes a few bugs that similar codes have. Please see the below-mentioned Features for this code.

1. Popup close button will close the window as well as refresh it. It will help restart the countdown timer with each button click.
2. Now Button will appear after clicking on the timer button. (Previously it will hide by default)
3. Your ads will be visible on the popup tab in the proper size on the screen. (Use square shape ads)
4. Solve the Close button hide error in the Popup Download Button code. 
5. the errors and add some features like a close button event to make the page refresh

I believe the process described in this article will definitely help you to add a proper functioning button that will show a popup dialog with 2 ads and one countdown timer to your blog visitors. The combination of a Popup Download Button with ads and a countdown timer is created with pure HTML, CSS, and Javascript codes.

Process to add Popup Download Button with ads and a countdown timer

You need to perform the following steps to successfully enable the popup to download button into your blogger posts or template. I describe each step for you to make understand how it works. You have lots of questions regarding “how to create pop-up ads in html or how to create pop-up ads on a website”. This process will help you to add Popup Download Button with ads and a timer in your Blogger. 

You can also check the pop-up advertising example by clicking the below-given download button.

Note: Please follow the process one by one to enable this functionality on your website.

Learn how to add a timer download button in html, how to create pop-up ads on Facebook, pop-up ad maker, pop-up ads website, add a button with popup ads timer javascript, Add, How to Add Popup Download Button With Ads And Countdown Timer,

HTML Code to add Popup Download Button

Here is the code for adding a Popup Download Button with ads and a timer in the blogger post. It needs to add HTML code to each post manually. You can follow the below-given steps to enable the “Popup Download Button”.

Step 1: Choose the place to paste the below-mentioned code.

Step 2: Find “####” and replace it with the desired URL that you want to open after 20 sec.

Step 3: Now you need to make changes in code as per your blogger template. 

Step 4: Replace or add the button class.

Step 5: Find “ button-class-name-here” and replace it with your blogger templates button class. usually, it is a “button” or btn. (you need to check your blogger template documentation for it.)  

Step 6: Replace “ <span style=”line-height: 15;”>Responsive ad</span>” this code with your AdSense ads code.

<div class="ssd-btn button-class-name-here" id="ssd-btn" rel="nofollow" target="_blank">Download</div>
<div class="Bloggerlly" id="my-Bloggerlly">
  <div class="ssd-pop-bg"></div>
  <div class="ssd-pop-inner">
    <div class="adpop-top">
      <label class="ssd-pop-close ssd-btnclose" id="RefreshBloggerlly"></label>
      <p style="margin: 0px;">Please Wait</p>
    </div>
    <div class="adpop-content">
      <div class="adhtml">
        <div style="background: rgb(238, 238, 238); height: 250px; margin: 0px auto; max-width: 300px; text-align: center;">
          <span style="line-height: 15;">Responsive ad</span>
        </div>
      </div>
      <div class="download-pop">
        <a class="button" href="####" id="ssd-download" rel="nofollow" target="_blank">
          Download File
        </a>
      </div>
      <div class="adhtml">
        <div style="background: rgb(238, 238, 238); height: 250px; margin: 0px auto; max-width: 300px; text-align: center;">
          <span style="line-height: 15;">Responsive ad</span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS Code to add Popup Download Button

Here is the CSS for the Popup Download Button with CSS for the Popup Dialog box which contains 2 ads and 1 timer text with a download button. You can easily implement this css in your blogger template by using the following steps.

Note: if you know how to use custom CSS on blogger.com then you can skip this process.

Step 1: Goto “Layout” Tab. (on blogger.com dashboard) 

Step 2: Click on “Theme Designer” 

Step 3: Choose “Advance Section” and Click on it. 

Step 4: Choose ” Add CSS” (from drop down menu)

Step 5: Copy below mentioned CSS. 

Step 6: Paste it into Add CSS box. 

<style>
/* Keep this Comment For Supporting Us. CSS By Bloggerlly.com */
.Bloggerlly {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: left;
	background: rgba(0, 0, 0, .9);
	transition: opacity .25s ease;
	z-index: 999;
}

.ssd-pop-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: pointer;
}

#ssd-downloadx {
	text-transform: capitalize;
	margin-top: 1px;
}

.ssd-pop-inner {
	transition: top .25s ease;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	margin: auto;
	overflow: auto;
	background: #fff;
	border-radius: 5px;
	padding: 1em 2em;
	height: 92%;
    z-index:inherit;
}

.ssd-pop-close {
	position: absolute;
	right: 1em;
	top: 1em;
	width: 1.1em;
	height: 1.1em;
	cursor: pointer;
}

.ssd-pop-close:after,
.ssd-pop-close:before {
	content: "";
	position: absolute;
	width: 2px;
	height: 1.5em;
	background: #333;
	display: block;
	transform: rotate(45deg);
	left: 50%;
	margin: -3px 0 0 -1px;
	top: 0;
}

.ssd-pop-close:hover:after,
.ssd-pop-close:hover:before {
	background: #aaa;
}

.ssd-pop-close:before {
	transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
	.ssd-pop-inner {
		width: 90%;
		box-sizing: border-box;
	}
}

.adhtml {
	margin: 10px 0 5px;
	min-height: 260px;
}

.adpop-top {
	height: 30px;
	width: 100%;
	border-bottom: 1px #E5E5E5 solid;
}

.adpop-content {
	height: 330px;
}

.download-pop {
	text-transform: capitalize!important;
	text-align: center;
	margin-top: 10px;
}

.ssd-btn {
	display: block!important;
	background: var(--button-bg);
	color: var(--button-color);
	text-align: center;
	padding: 8px;
	margin: 5px 0;
	border-radius: 3px;
}

.ssd-btn:hover {
	background-color: var(--button-hover-bg)!important;
	color: var(--button-hover-color)!important;
}

.adpop-top p {
	margin: 0;
	font-size: 16px
}
</style>

Javascript or JS Code for adding Popup Download Button in blogger post

Here is the Javascript or JS code for enabling the Popup Dialog box and timer to function well. With the help of this code, your popup timer will work fine. It has 20 seconds timer by default. You can change it by replacing the second in it. You can easily implement this css in your blogger template by using the following steps.

Step 1: Goto “Theme” Tab. (on blogger.com dashboard) 

Step 2: Click on the “Down Arrow” Button. (Available on the right side of the “Customize” button. )  

Step 3: Choose “Edit HTML” 

Step 4: Scroll down and Paste below the mentioned javascript code before “</body>” this closing tag.  

Step 5: Now click on the Save icon (Visible in the right top corner)

<script>
//<![CDATA[
const Bloggerlly = document.querySelector("#my-Bloggerlly");
const btn = document.querySelectorAll(".ssd-btn");
const closeBloggerlly = document.getElementsByClassName("ssd-btnclose")[0];
for (let i = 0; i < btn.length; i++) {
	btn[i].addEventListener("click", function () {
		Bloggerlly.style.display = "block";
	});
}
btn.onclick = function () {
	Bloggerlly.style.display = "block";
};
closeBloggerlly.onclick = function () {
	Bloggerlly.style.display = "none";
};
window.onclick = function (event) {
	if (event.target == Bloggerlly) {
		Bloggerlly.style.display = "none";
	}
};
var downloadButton = document.getElementById("ssd-download");
var counter = 20;
var newElement = document.createElement("span");
newElement.innerHTML = "Please Wait 20 sec";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);

function startDownload() {
	this.style.display = 'none';
	id = setInterval(function () {
		counter--;
		if (counter < 0) {
			newElement.parentNode.replaceChild(downloadButton, newElement);
			clearInterval(id);
		} else {
			newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... ";
		}
	}, 1000);
};
var clickbtn = document.getElementById("ssd-btn");
clickbtn.onclick = startDownload;
$('#RefreshBloggerlly').click(function () {
	window.location.reload();
});
//]]>
</script>

My Words: I hope this article will help you get enabled Popup Download Button with Ads and Countdown Timer. Please let me know in the comment section if you need any other help regarding this article. you can also subscribe for our notification.