Maybe you often see a download button that will automatically give a countdown time when we click and after the time is over, it will usually open automatically to a page or directly download files provided by the site.

So even with the tips on Installing the Download Box Button with Counter, which I will share, the concept is more or less the same. One reason why installing a download box button with this counter is to reduce the Bounce Rate of our blog when visitors visit the page.

Okay, without lingering, here are the tips.

Installing the Download Box Button with Counter

Before adding this widget, make sure your blog has Fontawesome installed. If not, add this code before </head>


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

First open Blogger > Click the Themes menu , Edit HTML and add this CSS code before </head>


<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.File-downx{display:block;margin:0 auto;border-radius:4px}.Fileify-downx{background:#3074e3;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}.Full-info span{display:inline-block;line-height:38px;float:right}.file-description{display:block}.file-description span{margin-right:3px}
@media screen and (max-width:640px){.File-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}.Full-info span{float:none;width:100%;text-align:center}.file-description{text-align:center}}
<style>

After that add this code before </body>or it can also be added before </head>


<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,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 ready to download in "+l.toString()+" Seconds....",t.style.display="none")},1e3)}
//]]>
</script>

Edit the text on the marked code, also edit the l=10 number 10 which means the required countdown time is 10 seconds.
Click the Save theme button .
Next, to add the Caller Download Box, add the code below in the post on the HTML tab.



<div class="File-downx">
<div class="Fileify-downx">
<div class="Full-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="#" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> download Now</a>
</div>
<div class="file-description">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> File Type </span>   <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size :300MB</span>
</div>
</div>
<div class="catatan-downx">
If it is not automatically downloaded, please click Download again. And if the link is broken, please report it via the Contact page of our blog.
</div>
</div>