Add Countdown Timer Download Button Blogger-[ 3 Scripts]

Add Countdown Counter Download Button to Blogger Website [Top 3 Scripts]

How to add a countdown timer download button for HTML code site. After the download link to download the HTML and JavaScript code, the Get Countdown Timer button will appear. There is no Blogger plugin to do this but with the help of a little JavaScript code we can easily create a countdown timer download button on any website.

We use it on our RP technical website. Many users of my website would like to know how the timer is calculated before the download link appears. So in this post, I will introduce 3 modern and beautiful scripts that we use on our site.

Before adding a download to the Blogger site with a computer button, you should read some points such as the advantages and disadvantages.

Why add a download button with a timer on Blogger or any other website?

This type of script is used on our web site and on many games, mode apps and software download sites. Click on the guest download button and then wait a few minutes then the download link appears and the download will begin. Why do you need to do this on your blog? You can place ads above and below the download button and timer. Click no further on your ad And the best thing about this script is that you can post some messages before the download link appears.

However, you can use it anywhere, such as with URL shorteners on sites or elsewhere. So if you want to add a countdown timer before the download button appears on the download page. Then follow the simple steps below.

The benefit of using the Download Timer button on the site

When visitors stay on your site longer, your website's visit rate will decrease which is the most beneficial for your website. Anyone can place different ads below and above the download button and get more clicks. So if you are experiencing high bounce rate issues then you should try this script.

You will find many plugins in WordPress, but we do not have this functionality in PHP or custom websites or blogger. So use one of the 3 best scripts to download a countdown timer from the bottom download button.

let's start -

There are 3 ways to create a timer download button using JavaScript and HTML

In this post, I will share 3 scenarios that you need and design one for your website, choose one of them. You can use all three.

Script / Method-1

Add a countdown timer to download the button with JavaScript.

Here are the steps to use it in your Blogger template:

1. Go to the Blogger Dashboard
2. Navigate to a post and create a new one
3. Convert from Composer Preview to HTML View.
4. Download the full code for all the modes in the download section below.
5. Just paste all the code in the first step and change the URL here into your download link.
6. That's it - simple JavaScript. If you know how to deal with CSS, you can configure it.

Copy the script by double-clicking on the following code:

  <div dir=”ltr” style=”text-align: left;” trbidi=”on”>
  <br />
  <span style=”font-size: x-large;”><br /></span>
  <br />
  <div dir=”ltr” style=”text-align: left;” trbidi=”on”>
  <script>
  var count = 15; // Number of remaining seconds.
  var counter; // Handle for the countdown event.
  
  function start() {
  counter = setInterval(timer, 1000);
  }
  
  function timer() {
  // Show the number of remaining seconds on the web page.
  var output = document.getElementById(“displaySeconds”);
  output.innerHTML = count;
  
  // Decrease the remaining number of seconds by one.
  count–;
  
  // Check if the counter has reached zero.
  if (count < 0) { // If the counter has reached zero…
  // Stop the counter.
  clearInterval(counter);
  
  // Start the download.
  window.location.href = “URL Here”;
  return;
  }
  }
  // Start the countdown timer when the page loads.
  window.addEventListener(“load”, start, false);
  </script>
  
  <br />
  <span style=”font-size: x-large;”>You Will Be Redirected To Download Link In <b><span id=”displaySeconds”>15</span></b> Seconds.</span><br />
  
  AdSense Code Here
  
  <br />
  <span style=”font-size: large;”><a href=”URL Here”>Click Here To Get The Download Link If Not Redirected.</a></span></div>
  </div>
  

If you don't like the first method or like more advanced then, follow the second method, a more up-to-date temporary download link using javascript, html and css.

Script / Second Method

Add an automatic countdown timer using the download link button with JavaScript.

In it you will find two identical texts, but with slight modifications to the text.

First script to use for automatic countdown timer on page load

The second script works when the user clicks the download button and then waits for the download link to appear.

Steps to get used to your blogger template:

1. Go to Blogger Dashboard.
2. Go to a job and create a new job
3. Convert from Composer Preview to HTML View.
4. Download the complete code for all the methods in the download section below.
5. Just paste all code 1 and change the download link to your download link.
6. That's it - simple JavaScript, if you know how to play with CSS, you can change it.

Double click on the icon below and select it again:

  <center>
  <span id=”countdown”>You have to wait 15 seconds.</span></center>
  
  <div style=”text-align: center;”>
  <b>Download Timer</b>
  
  <a href=”Download Link” id=”download_link” style=”display: none;”><img border=”0″ data-original-height=”91″ data-original-width=”500″ height=”51″ img=”” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSpA6FGPkxc20SiHAxmTHecgSD_bqcbo3FTeWPh3lVs6b3EklRkGijifmEYQGA8NnQJ8hd4OSxUokAUKhTl4pDXKFSfBuek4Icr3lG4sMpn7wiGnvmKxicrIog_x9-PCmiqU2KMHQ0HYu/s200/Download-Buttons-transparent-PNG-images-715×715.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 = 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>
  

Now the second program works when users click on the download button and then wait for the download link. The button appears after downloading and the user can download it.

Steps to create a modern download button with a countdown timer.

1. The Big Blogger Dashboard.

2. Go to the Themes / Templates section.

3. Click Edit HTML.

4. Now </head> find and paste CSS style underneath </head> or style CSS code for bottom []> </b>: skin> and back.

Style tags enter the following code:

  <style>
  
  /* Download Button Timer CSS */
  .buttonDownload{display:inline-block;position:relative;padding:10px 25px;background-color:#4cc713;color:#fff;font-family:sans-serif;text-decoration:none;font-size:.9em;text-align:center;text-indent:15px}.buttonDownload:hover{background-color:#333;color:#fff}.buttonDownload:after,.buttonDownload:before{content:’ ‘;display:block;position:absolute;left:15px;top:52%}.buttonDownload:before{width:10px;height:2px;border-style:solid;border-width:0 2px 2px}.buttonDownload:after{width:0;height:0;margin-left:3px;margin-top:-7px;border-style:solid;border-width:4px 4px 0 4px;border-color:transparent;border-top-color:inherit;animation:downloadArrow 2s linear infinite;animation-play-state:paused}.buttonDownload:hover:before{border-color:#4cc713}.buttonDownload:hover:after{border-top-color:#4cc713;animation-play-state:running}@keyframes downloadArrow{0%{margin-top:-7px;opacity:1}0.001%{margin-top:-15px;opacity:0}50%{opacity:1}100%{margin-top:0;opacity:0}}
  </style>
  
  

5. Now Find & Past Below SCRIPT Code before </body>

Again Select below code by double click and copy it:

  <script type=”application/javascript”>
  function downloadStart(){
  var message = “%d seconds before download link appears”;
  // seconds before download link becomes visible
  var count = 5;
  var countdown_element = document.getElementById(“countdown”);
  var download_link = document.getElementById(“download_link”);
  var download_start = document.getElementById(“downloadStart”);
  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.style.display = “initial”;
  countdown_element.innerHTML = “You have to wait %d seconds.”.replace(“%d”, count);
  download_start.style.display = “none”;
  // decrease counter
  count–;
  } else {
  // stop timer
  clearInterval(timer);
  // hide countdown
  countdown_element.style.display = “none”;
  // show download link
  download_link.style.display = “”;
  }
  }, 1000);
  };
  </script>
  

6. Save Template and Open Post or Create a new post to check to work on the script.

7. Place in your Post/Article where you need to use this download button  HTML for Download Button

  <div class="downloadButtonByTechnicalArp" style="text-align: center;">
  <br />
  Place your ADSENSE CODE - 1
  <br>
  
    <span id="countdown" style="display:none;">You have to wait 15 seconds.</span>
  <br />
  <div style="text-align: center;">
    <a onClick="downloadStart()" id="downloadStart" class="buttonDownload" >Download</a><br />
    <a href="your link" id="download_link" class="buttonDownload"  style="display: none;">Download Now</a>
    <noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
  </div>
  <br />
  ADSENSE CODE - 1
  <br>
  </div>
  

That is, use one of the scripts above. Now let me share your interesting and responsive design with Bootstrap.

Scenario 3 / Method 3

Responsive and attractive download button with countdown timer

Button download timer: Bootstrap Designed: Used from our website. Note: To use this script, you need to know some CSS to make changes to your website.

Steps to use this script:

All stages are the same as described in the second method.

Just use the code below and use it.

That's It Use any of the above Script. Now Let me share my own Attractive & Responsive Design using Bootstrap.

Script 3 / Third Method

Responsive and Attractive Countdown Timer Download Button

Download Button with Timer: Bootstrap Designed: Used by Our website. NOTE: If you want to Use this Script then you must know some CSS to make changes according to your website.

Steps to Use this Script:

1. All Steps are the same as mentioned in the second method.
2. Just Use the below Code and use it.

  <style>
  /* Download Button Timer CSS */
  #containerId{background:#37b8ef;}
  .textCenter{}
  .textTopic{color:#000; margin:1%;}
  .textSize{font-size:14 px; color:#000;}
  #arpianDownloadButton,#arpianDownloadButtonLink{padding:10px 20px;border:0;border-radius:5px;background:#fff;color:#000;float:right;text-transform:capitalize;font-weight:700;}
  </style>
  

Now Place below code in your Post/Article where you need to use this download button */

  <div class=”container-fluid” id=”containerId”>
  <div class=”container” style=”margin:1%;”>
  
  <div class=”textCenter”>
  <P class=”textTopic” align=”center”><b>TITLE/Heading comes Here </b></P>
  <div>
  <span class=”textSize”><b>Click here 👇 to Download </b></span>
  <button id=”arpianDownloadButton” onclick=”generate()”><i aria-hidden=”true” class=”fa fa-cloud-download”></i> download</button>
  <a href=”#DOWNLOADLINK” id=”arpianDownloadButtonLink” style=”display: none;”><i aria-hidden=”true” class=”fa fa-cloud-download”></i> Re-download</a>
  </div>
  </div>
  
  <!– Banner ads for download –>
  <br />
  <!–ADSENSE Code 1 for Banner Size–>
  </div>
  
  <div class=”table”>
  <table class=”table table-bordered ” style=”background:#f7f7f7″>
  <tbody>
  <tr align=”center”>
  <td>If it’s not downloaded automatically, Please Try Again & Click to Re-Download. And If Again not able to Downlaod Please Inform via the Contact Form page of this blog.
  </td>
  </tr>
  </tbody>
  </table>
  </div>
  </div>
  

<!--Script to Make Download Button with Timer-->

  <script type=’text/javascript’>
  //<![CDATA[ Load Time for Download
  function generate(){
  var e,n=document.getElementById(“arpianDownloadButtonLink”),
  t=document.getElementById(“arpianDownloadButton”),
  a=document.getElementById(“arpianDownloadButtonLink”).href,
  //Time in seconds
  l=40,
  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’/> This file is preparing to download please wait. “+l.toString()+” Seconds….”,t.style.display=”none”)},1e3)}
  
  //]]>
  </script>
  

Thanks here our aritcle end if you have any query please comment below:

sample

Insert ADSENSE CODE - 1

Your download will begin in 15 seconds.

ADSENSE CODE - 2
Click here if your download does not begin.