How to Add Countdown Timer Download Button in Blogger Website

Hello, Welcome to Accomodatio. If you are searching for the "Best Button with Countdown Timer Script" then you are at right place. In this article you will get the Best Download Countdown Timer Script. Adding a Download Button with Countdown Timer is very beneficial to maintain the bounce rate as well as it also increase user engagement in a blog. This further leads to increase overall earnings of your blog.

Benefits of Using Button with Countdown Timer

• This widget will help you to reduce the bounce rate which will have a positive impact on SEO of your blog.
• This widget also helps you to increase your earnings from the blog.

Timer Button Demo

Steps to Add Download Button with Countdown Timer

This tutorial is divided into two steps. The first step is Adding JavaScript & CSS Codes and the second step is Adding HTML Codes. Follow the given steps carefully to add Download Timer Button.

Step 1. Adding JavaScript & CSS Codes

Add the following codes above to </head> tag.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
<style type='text/css'>
/* Download Counter Box */ 
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#282828;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#000000;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#282828;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#282828;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=15,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> The file is ready to download in "+l.toString()+" Seconds....",t.style.display="none")},1e3)}
//]]>
</script>

The number 15 in the code above is the time parameter (seconds) the destination link displays, you can change it to be faster or later. You can also customize the text of the time that appears by changing the 'The file is ready to download in', 'second' section.

Step 2. Adding HTML Codes

Now add the following HTML Codes where you want to add Download Button with Countdown Timer.

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
File Name
</div> 
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="your_link" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Re-download</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Accomodatio</span><br>  <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size 200KB</span>
</div>
</div>
<div class="catatan-downx">
If it doesn't download automatically, please click Download again. And if the link is broken, please report via the Contact Form page of this blog.
</div>
</div>

Change the parts as per your liking that we've marked.

Another Method

If you don't want to add Download Button with Countdown Timer in two steps then use this method. This method is easier than above method.

Add the following codes where you want to add Download Button with Countdown Timer.

 
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#282828;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#000000;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#282828;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#282828;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=15,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> The file is ready to download in "+l.toString()+" Seconds....",t.style.display="none")},1e3)}
//]]>
</script>


<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
File Name
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="your_link" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Re-download</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> AS Themes World</span><br>  <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size 200KB</span>
</div>
</div>
<div class="catatan-downx">
If it doesn't download automatically, please click Download again. And if the link is broken, please report via the Contact Form page of this blog.
</div>
</div>

I hope you loved this article. If there are questions or sections that are not understood, let us know in the comments.

© Copyright - Accomodatio