How To Add A Download Timer Button Free Download

How To Add A Download Timer Button | Free Download

by

You want a Download Timer script for the Blogger page, right? Then this guide will help you do that for sure.

In this piece, I’ll show you how easy it is to add a download timer button to your Blogger site and how you can change it to suit your needs.

The same tool can also be used for your WordPress site. You just need to add the script to the post-writer using a custom HTML block.

What is Download Timer and how it works?

Download timer is a simple piece of JavaScript code that starts a countdown of 15 seconds or the time you set and then shows you the download link when the time is up. Because it shows the link to download after a certain amount of time, it is called a “download timer.”

Here, you can choose how long you want to wait, and when the timer runs out, the button to download the file will show in the blog post. So, when a user clicks on the button, the link will open in a new tab, and the user can download the file.

Benefits of Download Timer widget

If people come to your blog to download a file and then leave as soon as the download starts, you should add the download timer script to your Blogger and WordPress sites.

So, you can ask the user to wait a while before getting the file. This way, they will spend more time on your site, and the number of people who leave after reading that blog post will go down.

Another benefit of using a countdown timer is that it helps you make more money from Adsense by keeping users on a page longer. This will make it more likely that more people will see your ads and click on them.

How to add a Download timer button in Blogger?

Follow the steps carefully to add a button with a 15-second download timer to your Blogger site.

Step 1: Open the blog post in HTML view from the Blogger homepage.

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

</head> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
.button {
    background-color: DodgerBlue;
    border: none;
    color: white;
    font-family: Arial;
    font-size: 20px;
    text-decoration: none;
    padding: 12px 30px;
   cursor: pointer;
}
  
  .button:hover {
  background-color: RoyalBlue;
}
  
.ddd{
    background-color: RoyalBlue;
    border: none;
    font-family: Arial;
    font-size: 20px;
    text-decoration: none;
    padding: 12px 30px;
    color: white;
  cursor: pointer;
  }
  
  .ddd:hover {
  background-color: DodgerBlue;
}
</style>

<div style="text-align: center;">
<a class="button" href="https://yourdownloadlinkhere.com" id="download" target="_blank"><i class="fa fa-download"></i>Download Now</a>

<button class="ddd" id="btn"><i class="fa fa-download"></i>Download Here</button>

<script>
var downloadButton = document.getElementById("download");
var counter = 15;
var newElement = document.createElement("p");
newElement.innerHTML = "<b>15 seconds to Wait.</b>";
var id;

downloadButton.parentNode.replaceChild(newElement, downloadButton);

function startDownload() {
    this.style.display = 'none';
    id = setInterval(function () {
        counter--;
        if (counter < 0) {
            newElement.parentNode.replaceChild(downloadButton, newElement);
            clearInterval(id);
        } else {
            newElement.innerHTML = +counter.toString() + " <b> seconds to Wait.</b>";
        }
    }, 1000);
};

var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
</script></div>

Step 3: Now, change the download timer sec shown above (here, 15 sec).

Step 4: Now you need to add the link to the script above. so change the # number to the link to download.

Step 5: You can now use a button to change the download link. Add /download/button to the end of the link text. (For the styles on Templateify).

Now, click “Publish,” and the 15-second download timer button will be added to your Blogger site.

Video Guide

If you learn better by seeing, I’ve made a movie with a step-by-step guide on how to add a download timer button to Blogger.

Leave a Comment