How to Add 15 Sec Download Timer Button in Blogger Website

How to Add 15 Sec Download Timer Button in Blogger Website 


Hello Friends, Welcome to AS Themes World. If you are searching for the "Best Download 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 Download 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.

Preview of Download Button with Countdown Timer

File Name
AS Themes World
File Size 200kb
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.

Steps to Add Download Button with Countdown Timer

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> 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>

As per your liking change the parts 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>

Video Tutorial

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


Article "How to Add 15 Sec Download Timer Button in Blogger Website " protected

Post a Comment

Previous Post Next Post