How to Make a Download Button With a Timer

How to Make a Download Button With a Timer

Go to download
#1

 


How to Make a Download Button With a Timer

Hi friends, this time I will share a tutorial on how to make an automatic download button using a timer, you could say a countdown timer. Well, making this is quite easy, let's try it with this simple tutorial


  • Countdown Timer
  • Please login first to the blogger Dashboard
  • Select Theme > Edit HTML
  • Put the following script above the code </head>

<style type='text/css'>
/* Download Counter Box by BloggerPrince.net */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#5ab9e8;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#00B894;color:#fff;outline:none}.nia-downx{display:block;margin:0 auto;border-radius:4px}.nqnia-downx{background:#5ab9e8;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:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.hint-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){.nia-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}.hint-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>

After that paste the calling script just above the code </body>

<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'/> File Is Downloading Please Wait "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>
Save your template

To install the download code in the post, please copy the following script in your post in HTML mode
<!--Download Btn Start-->
<div class="nia-downx">
<div class="nqnia-downx">
<div class="hint-info">
<div class="file-info">
File Name Download</div>
<button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> download</button>
<a href="#" id="downloadx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i>Downloading</a>
<br />
<div style="text-align: left;">
File Size: 7MB</div>
</div>
<!--Download end--></div>


Other Settings:

To set the countdown seconds, please change the following code .href,l=15 (replace 15 with whatever you want)

Ok?? that's how to make an automatic download


Demo



File Name Download

File Size: 7MB

image quote pre code