How to Make a Countdown Timer Download Button on Blogger

How to Make a Countdown Timer Download Button on Blogger
How to Make a Countdown Timer Download Button on Blogger



Create a Download Button on Blogger - The download button is a feature that must exist on a blog or website, especially if the blog has a niche that contains downloadable content such as applications, videos or other content that does provide files for download.

The benefit of having a download button is to make it easier for users or visitors when clicked to get files provided by the blog manager which are usually stored on hosting or free third-party cloud storage services such as Google Drive, MediaFire, OneDrive, Mega etc.

The download system displayed by each blog/website owner will be different, there is a download button which when clicked will make a direct link to the download page where the file is hosted or stored, or you can also download directly where when clicked the file will be downloaded automatically, usually will display the countdown or countdown time.

How to Make a Countdown Timer Download Button on Blogger

Well, in this tutorial I will try to share how to make a download button with a Countdown Timer, where when a visitor clicks, the countdown will start and the file will be downloaded automatically.

The advantage of installing a download button with a countdown is to reduce the blog's bounce rate when visitors visit the page.

Tutorial Installing Countdown Timer Download Button

Before going to the tutorial, make sure your blog has the latest version of Font Awesome installed so that the download button works properly, if not, add the code below before the </head>or code&lt;/head&gt;&lt;!--<head/>--&gt;
<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:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;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}.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=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'/> The file is ready to download in "+l.toString()+" Seconds....",t.style.display="none")},1e3)}
//]]>
</script>
For those of you who have previously installed the Font Awesome code on the Blog, just install the following code
<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}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;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}.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=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'/> The file is ready to download in "+l.toString()+" Seconds....",t.style.display="none")},1e3)}
//]]>
</script>
Set the countdown time as you wish in the code I marked l=10, Numbers 10are the countdown time space.

If you have Click Save / Save to make changes that have been made in your blogger template.

Implemented Countdown Timer Download Button in Blog Posts

The next step is to apply the download button that has been set in your template code to your blog post, the trick is to copy the code below on the post's HTML menu
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Name File
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="LINK DOWNLOAD" 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> Nama Pembuat </span>
<span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i> File Size 15MB </span>
</div>
</div>
<div class="catatan-downx">
If it doesn't download automatically, click Download again. And if the link is broken, please report via the Contact Form page of this blog.
</div>
</div>
Set the code that I marked according to your needs, starting from Name, Other, Size etc.

Code Information
Nama File Change according to the name of the file you are sharing
LINK DOWNLOAD URL Link download
Nama Author Can be changed to your name or your blog name
File Size It can be left blank or To make it more professional, it can be filled in according to the size of the file you are sharing to provide details
Notes Fill in according to the file records that you share

To get a download link that can be downloaded directly when clicked, you can read my previous articles about Google Drive, Dropbox and OneDrive.

Closing

So, that was how to make a download button with a Countdown timer on Blogger , this feature is very suitable for blogs with downloadable content or other nicknames.

Hopefully this article can help those of you who are looking for an attractive download button display with a countdown time feature.

Post a Comment

Welcome to Jehangir Khan's Tech Blog! We're thrilled to have you join the conversation. Your comments and feedback are valuable to us and help us create a community of tech enthusiasts who share ideas and insights. We encourage you to share your thoughts related to the post and engage in a respectful and meaningful conversation with others. Please refrain from spamming or promoting your own content in the comments section. We also ask that you avoid using inappropriate language or attacking others. Please note that all comments will be reviewed before they are posted, and we reserve the right to remove any comments that violate our policies. Let's explore the world of technology together and inspire each other to achieve our goals!

Previous Post Next Post