How To Add Countdown Timer Before A Download Link in Blogger

 You might have seen at many downloading sites or safe link sites uses a countdown timer before the link appears, when the page loads, a 10 second timer automatically start. then after the time is up a download button appears for people to click on the link and start their download.

Download Button (With Timer) is used for many purposes in our blog one of them is to reduce the Bounce Rate of a website.


How To Add Countdown Timer Before A Download Link in Blogger
How To Add Countdown Timer Before A Download Link in Blogger


Advantage of Countdown timer:

  • If you have AdSense or using any other ad networks , By using this code before downloading will help you to increase the earnings
  • It will reduce the bounce rate of your site
  • When user is waiting he may see other posts of your site and may get attracted. 

Disadvantage of Countdown Timer:

  • Visitors may get disturbed, In some sites there will be more than 15 seconds timer
  • Users may leave the site due to long timer etc.. 

How to Add it on Blogger:

Its very easy to implement on blogger just follow below steps. 

Paste the below code in post or in page 
<br />
<!-- Paste Your Adsense Code Here --> 
<br>


// Paste the whole code in post where you need timer   

<center>
<span id="countdown">You have to wait 15 seconds.</span></center>
<br />
<div style="text-align: center;">
<a href=" your link" id="download_link" class="btn btn-gradient gradient2"style="display: none;font-weight:bold;font-size:20px;border:1px solid #ccc;border-radius:10px;padding:10px;text-decoration:none;color:#fff;background-color:#ff5722;">Download</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>
<br />
<!-- Paste Your Adsense Code Here -->  
<br>


Info:

You Change the timings as your choice , Please add the above code in post html only Do Not Separate the code .