HOW TO MAKE DOWNLOAD TIMER BUTTON FOR BLOGGER & WORDPRESS

If you are providing any file on your Website to download, this Download Box will be helpful for you. Some websites shows a countdown before the download begins or redirected to final destination.

Creating a Countdown Download Box for your Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML

Step 1: First of all Login to your Blogger Dashboard.

Step 2: Create a NEW POST on Blogger Dashboard.

Step 3: Click HTML View on New Post

Step 4: Add the following HTML Codes in your Blog Posts through HTML View to add Countdown Download Box.

<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>

Replace the marked parts as per your need, i.e

# with download link.

15 with countdown in seconds.

To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken