You must have seen this type of Popup Download Timer Button on many websites, whenever we click on any download link, it opens with a Popup Timer and we mostly see this in Images Download websites.
Read More: How To Remove “?m=1” From Blogger URL
So today in this post we will know How To Add a Download Button Click With Popup Ads In Blogger.
Advantages of Download Timer Button
If you add this type of script to your blog, then the visitor will stay on your blog for a longer time, which will increase the waiting time of your blog, and at the same time, your Adsense Earning will also be more because it has more chances of clicking on ads.
How To Add Download Button Click With Popup Ads In Blogger
It is very easy to install such Download Buttons. In this, you have to follow some simple steps, after which in your website also on clicking on this download button, Popup Ads Window will open that too with Timer.
Step 1. First of all copy the codes given below and then open your Blogger Dashboard and go to Theme>>Edit HTML.
<style>
#at-downloadx{position: relative;display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #ffffff; color: #00991f; font-size: 15px; border-radius: 9px; text-transform: capitalize; border: 1px solid #005414!important; margin-top: 1px;} .adpop-top{height: 40px; width: 100%; border-bottom: 1px #E5E5E5 solid;} .btn-at{display: block; height: 50px; color: #fff!important; font-size: 18px;border-radius: 25px; text-transform: uppercase; background: #04AA6D;text-align:center; line-height: 50px;width: 200px; margin: 12px auto; transition: all 0.4s ease-in;} [data-ml-modal] { position:fixed; top:0; bottom:0; left:0; right:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:999; width:0; height:0; opacity:0; } [data-ml-modal]:target { width:auto; height:auto; opacity:1; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; } [data-ml-modal]:target .modal-overlay { position:fixed; top:0; bottom:0; left:0; right:0; cursor:pointer; background-color:#000; background-color:rgb(247 255 160 / 21%); z-index:1; } [data-ml-modal] .modal-dialog { border-radius:6px; box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); position:relative; width: 90%; max-width:660px; max-height:70%; margin:10% auto; overflow-x:hidden; overflow-y:auto; z-index:2; } [data-ml-modal] .modal-content {background:#ffffffcf; padding:23px 27px;} @media (max-width:767px) { [data-ml-modal] .modal-dialog {margin:20% auto;} }
.at-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
</style>
Step 2. After going to Edit HTML, press Ctrl+F or search </head> in the search bar and paste these codes just above the </head>
Step. 3. Now again copy the below codes and go to Edit HTML and search </body> you will find it at the bottom of the theme. Just paste the codes copied above.
<script>
//<![CDATA[
var downloadButton = document.getElementById("at-downloadx"); var counter = 40; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 40 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.... "; } }, 1500); }; var clickbtn = document.getElementById("btn-at"); clickbtn.onclick = startDownload;
//]]>
</script>
Step.4. Now copy the code given below and open the post in which you want to put the Download Button and convert it to HTML View.
<p><a class="btn-at" href="#AT-downloadPop" id="btn-at">Download</a></p>
<div data-ml-modal="" id="AT-downloadPop">
<div class="modal-overlay"></div>
<div class="modal-dialog">
<div class="modal-content center">
<div class="adpop-top">
<h3 style="margin: 0px;"><span style="color: red;">Click on Download Please Wait After Time is Over</span></h3>
<div class="at-pop__close" onclick="document.getElementById("AT-downloadPop").style.display="none""><svg style="height: 25px; width: 25px;" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>
</div>
<br />
<div style="width: 460px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5394955726848487"
data-ad-slot="5727095169"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<br />
<a class="button" href="#" id="at-downloadx" target="_blank">Download File</a>
</div>
</div>
</div>
Step 5. Now paste the copied codes at the place where the Popup Download Button is to be placed in the post. Instead of # in the last codes, you have to add the download link of your file.
After this Popup Download Button With Ads and Countdown will be installed in your post. Now view the post, and you will see the Download Button. On clicking on it a popup will open in which Download Button will appear with Advertisement.
So in this way you can increase the waiting time of your blog with a Download Button With Popup Ads. If you face any kind of problem in adding this script, then definitely tell me by commenting. I hope you must have liked this post How To Add Popup Download Button With Ads And Countdown. Do share this with your blogger friends too.