How to add Popup Download Button with Ads and Countdown Timer in Blogger Post (CSS and Javascript)- Bloggerlly.com

How to add Popup Download Button with Ads and Countdown Timer Javascript - Bloggerlly.com
How to add Popup Download Button with Ads and Countdown Timer Javascript - Bloggerlly.com

Today i am going to write this article to help my readers regarding "How to add Popup Download Button with Ads and Countdown Timer in our blogger template or Blogger post by using HTML, CSS and Small code of Javascript. Here on internet you will found the same kinds of article with a similar codes but lots of bugs and errors in the code. Here i am try to make this code simpler and easy to understand. If you want to learn Java Script and CSS. This code will definately a challenge for you.

I believe the process and code given this article will definatly help you to add a proper functioning button which will show a popup dialog with 2 ads and one countdown timer. This is created with pure html, CSS and javascript codes.

What New in Popup Download Button with Ads and Timer 

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

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

Follow this Process for adding Popup Download Button with ads and timer

You need to perform the following steps to successfully enable the popup download button into your blogger posts or template. I describe each step for you to make understanding 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 website". This process will help you to add Popup Download Button with ads and timer in your Blogger. 

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

Download

Please Wait for Few Seconds

Responsive ad
Responsive ad

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

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

HTML Code to add Popup Download Button

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

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

Step 2: Find "####" and replace it with 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 "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 contain 2 ads and 1 timer text with download button. You can easily implement this css in you blogger template by using following steps.

Note: if you know how to use custom CSS in 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 in 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 function well. With the help this code your popup timer will work fine. It has 20 second of timer by default. You can change it by replace the second in it. You can easily implement this css in you blogger template by using following steps.

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

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

Step 3: Choose "Edit HTML" 

Step 4: Scroll down and Paste below mention javascript code before "</body>" this closing tag. 

Step 5: Now click on Save icon (Visible on 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 you will like this article and appreciate my efforts to bring such informatic article to you. I request you all to share your valuable feedback in the comment section. and if you like you can share this post with your friends so they can have good stuff in their archive. You can support me by following me on instagram @doodlemanish and our official page @Bloggerlly

Next Post Previous Post
No Comment
Add Comment
comment url