How To Add Download Button With Countdown Timer In Blogger

5/5 - (2 votes)

How to add Download button with Countdown timer in Blogger: Adding a Download button with a Countdown timer is very beneficial for any kind of blog to maintain the bounce rate as well as to increase user engagement. This further leads to Increased overall earnings for your blog.

Download Timer Benefits:

Table of Contents show

Maintain the bounce rate
Increased earnings
Increase user engage
Professional look

Countdown Timer with html Script:

We can implement the download Timer’s feature by using Coding. HTML and JavaScript have been used here.

If you see any tools or Widgets related to online web development. Coding has great importance in everything. Nowadays, people earn a decent amount of money even sitting at home easily.

How to add Download button with Countdown timer in Blogger Code

Step 1 – First of all you will get this Download Timer’s Script here. Copy it.

<br />
<!-- Start of top ads banner code -->
<a href="http://fc.lc/ref/751683240340041729"><img src="https://fc.lc/CustomTheme/img/refb468.png" title="fc.lc - Make short links and earn the biggest money" /></a>
<!-- End of top ads banner code -->
<br>

<div dir="ltr" style="text-align: left;" trbidi="on">
<body>
<center>
<span id="countdown">You have to wait 10 seconds.</span></center>
<br />
<div style="text-align: center;">
<br />
<a href="https://www.youtube.com/c/TECHFORUOFFICIAL" id="download_link" style="display: none;">

<img src="https://1.bp.blogspot.com/-K0p-fvrZ1bw/X6LDFIua_5I/AAAAAAAADsc/IV9UiAiiuwsDXnd82SPrBSJzlnpBvpMPACLcBGAsYHQ/w320-h78/107-1073795_download-button-png-file-download-free-download-button.png" /></a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 10;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>
</div>
</body></div>

<br />
<!-- Start of buttom ads banner code -->
<div data-WRID="WRID-149201162218855591" data-widgetType="staticBanner" data-class="affiliateAdsByFlipkart" height="60" width="468"></div><script async src="//affiliate.flipkart.com/affiliate/widgets/FKAffiliateWidgets.js"></script>
<!-- End of buttom ads banner code -->
<br>

Step 2 – Now you have to paste this code wherever you want to use this widget.

Step 3 – Now you have to paste your download link in this code at the instance of “https://www.youtube.com/channel/UCAP6lg-W29wbnABBvOYFxNQ”.

Step 4 – You can change the top & bottom ads code. For more convenience watch the video tutorials.

Step 5 – If you want to change the time in it, then you can easily change it. And save.

Also Read: Free theme for blogger || Best Premium Blogger theme for Free 2023

Note: For more information consider a step-by-step video tutorial.

Finally, we hope this article can help you to understand “How to add Download button with Countdown timer in Blogger”. If you really think this article helps you then don’t forget to appreciate our efforts in the comments below. For more blogging tutorials, stay connected with us.

For the latest tech news & blogging Tutorials, follow TECH FOR U on Twitter, Facebook, and subscribe to our YouTube channel.

Read More: