How to add a Download Timer button in Blogger & WordPress?

Are you looking for a Download Timer script for the Blogger website? Then this article definitely helps you in that.

Here, in this article, I will show you how you can add a download timer button to your Blogger website easily and customize it according to your choice. 

You can also use the same script for your Wordpress website. You just need to add the script using a custom HTML block inside the post editor. 

What is Download Timer and how it works?

Download timer is a simple javascript code that starts a count down of 15 sec or the time set and shows you the download link after the time is over. As it reveals the download link after some time, that’s why it is called a download timer. 

Here you can set the time according to your choice and when the timer will stop, the download button will appear in the blog post. So, When a user will click on the button the link will open in a new tab and the user can able to download the file. 

Benefits of Download timer widget

If you are running a blog where users come to download a file and leave the site as soon as the download starts then you should implement the download timer script in your Blogger and Wordpress website. 

In this way, you can ask the user to wait some time before downloading the file and you will get some dwell time in your website and the bounce rate will reduce for that blog posts. 

Another benefit of implementing a countdown timer is that it helps you boost the Adsense revenue by engaging the user more time on a webpage. in this way, you can increase the chances of getting more impressions and clicking on your ads. 

How to add a Download timer button in Blogger?

To add a 15 seconds download timer button to your blogger website, follow the steps carefully. 

Step-1: Go to Blogger dashboard and open the blog post with HTML view. 

Step-2: Now copy the below download script and paste it into the blog post editor. 

<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown">You have to wait 15 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>Generating Download Link...</b><br />
<a class='button' href="#" target="_blank" id="download_link" style="display: none;">Download Now</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 = 15;
   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></div>

Step-3:Now change the download timer sec highlighted above ( Here 15 sec)

Step-4: Now you have to add the download link in the above script. so replace the # value with the download link. 

Step-5: Now you can change the download link with a button. Just add /download/button after the anchor text. (For Templateify themes). 

Now hit the publish button and the 15 seconds download timer button is added to your blogger website. 

Video Guide

If you are a visual learner then I have prepared a detailed video on how to add a download timer button in blogger with the step-by-step guide. 

Here you can see the demo, how the download timer script works. If the download timer is stoped then you can refresh the page to start the download timer again. 

By the way, you can download the above count-down script by clicking on the download button. 

Note that If you are using themes like Fletro or Median UI theme then you have to add the button class in the anchor element in the above code. 

So, you can download the “Download timer button” script with the Button class from the above button.  

Check Out the Updated Download timer (2022)

If you have any doubts or trouble during the setup of the download timer script in your blogger website then you can ask me in the comment section. 

New Download Timer script 2023

<button id="my-download-btn">Download</button>

<style>
#my-download-btn {
  background-color: #4CAF50; /* Change Background Color */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

#my-download-btn:hover {
  background-color: #3e8e41; /* Change Button Hover Color */
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
</style>

<script>
const downloadBtn = document.getElementById("my-download-btn");
const countdown = 10; // Set the countdown time in seconds

downloadBtn.addEventListener("click", () => {
  let counter = countdown;
  const countdownInterval = setInterval(() => {
    // Update the button text with the remaining time
    downloadBtn.innerHTML = `Download (${counter})`;
    
    // Animate the button text with CSS
    downloadBtn.style.animation = "pulse 1s ease-in-out infinite";
    
    if (counter === 0) {
      // Stop the countdown and redirect to the download link
      clearInterval(countdownInterval);
      window.location.href = "https://example.com/";
    }
    
    counter--;
  }, 1000);
});
</script>

If you want a different Animation Effect in the button, use the below script.

<button id="my-download-btn">Download</button>

<style>
#my-download-btn {
  background-color: #4CAF50; /* Change Background Color */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

#my-download-btn:hover {
  background-color: #3e8e41;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
</style>

<script>
const downloadBtn = document.getElementById("my-download-btn");
const countdown = 10; // Set the countdown time in seconds

downloadBtn.addEventListener("click", () => {
  let counter = countdown;
  const countdownInterval = setInterval(() => {
    // Update the button text with the remaining time
    downloadBtn.innerHTML = `Download (${counter})`;
    
    // Animate the button text with CSS
    downloadBtn.style.animation = "blink 1s infinite";
    
    if (counter === 0) {
      // Stop the countdown and redirect to the download link
      clearInterval(countdownInterval);
      window.location.href = "https://example.com/";
    }
    
    counter--;
  }, 1000);
});
</script>

For More awesome Tutorials, don’t forget to Subscribe to our YouTube channel and Join our Telegram Group. 

Read More: How to add Pros and cons Table in Blogger.