How to add Download Countdown Timer in website

Delay download timer, also called download countdown timer, is one of the sections on any website which is an essential part of that site. You might have seen this delay download timer on many different pages of this website. You might be wondering, why I've marked this section essential for any website. It's because it has many advantages.

Advantages of Download Countdown Timer:

The few most important advantages of this download countdown timer are listed here.

1. Tells user where is the download link
2. Makes visitor stick to the site for some time
3. Minimises Bounceback rate ( very important for website SEO )

How Download Countdown Timer works?

Download Countdown Timer is a Jquery based lightweight plugin for Blogger. Before it was available only for WordPress but now you can install it on Blogger as well. This plugin uses Javascript to enable timer function shows download URL after delay.

About My Effort ❤️ :

Most of my followers were asking for a tutorial to add this download countdown timer. So to help you all and answer your question I create a jQuery Plugin to handle this job.

This Jquery plugin will be easy for you to add to your blogger or WordPress website. If you are wondering how this download countdown timer will look, look at the thumbnail of this post.

I know no one reads all the text so let me share the code and steps to add it to your website.

As I have told you, this is a jQuery Plugin so first, you need to add the jQuery library from CDN to your website. Copy the code given below and add it before </head> in blogger and in WordPress add it in header.php

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Most of the websites nowadays already have jQuery library added, so if it is already there don't add it again.

Implementation Guide:

First of all copy both the codes given below.

<style>.download-container {
  --primary: #f9f9f9;
  --accent: #52aeff;
  --secondary: #3b4252;
  --grad-1: linear-gradient(to right, #64b3f4, #c2e59c);
  --max-width: 630px;
  --border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.download-container .content {
  background-color: var(--primary);
  border: 2px solid var(--accent);
  border-radius: var(--border-radius);
  width: var(--max-width);
  padding: 8px;
}

.download-container .content .top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  flex-basis: 0;
}

.download-container .content .top .left {
  padding: 0 10px;
}

.download-container .content .top .right {
  padding-top: 1em;
}

.download-container .btn {
  padding: 0.5em 1em;
  background: var(--grad-1);
  color: #fff;
  border-radius: 8px;
  margin-right: 5px;
}

.download-container .content .top span:first-child {
  font-weight: 700;
}

.download-container .content .top label span {
  font-weight: 400;
}

.download-container .content .bottom {
  background: var(--grad-1);
  padding: 10px 5px;
  display: block;
  text-align: center;
  border: 2px solid var(--primary);
  border-radius: var(--border-radius);
  color: var(--primary);
  position: relative;
}

.download-container .content .bottom .bar {
  height: 4px;
  left: 0;
  top: 1px;
  background: var(--accent);
  position: absolute;
  border-radius: var(--border-radius);
}

.download-container .progress {
  animation: progress var(--duration) linear;
}

@keyframes progress {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

@media screen and (max-width: 500px) {
  .download-container .content .top {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 10px;
    flex-basis: 0;
  }

  .download-container .content .top .left {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}

.hidden {
  display: none;
}

</style>

<script> /*<![CDATA[*/ (function($) {
  $.fn.download = function(options) {
    var defaults = {
      messageText: "Your download will automatically start in <mark>5</mark> seconds. If not click download button again!",
      duration: 5, //In Seconds
    };

    var settings = $.extend({}, defaults, options),
      index = 0;
    $(this).each(function() {
      // Below is the main plugin code
      let link = $(this).data("href"),
        name = $(this).data("name"),
        size = $(this).data("size");

      let code = `<div class="download-container" data-index="${index++}"><div class="content"><div class="top"><div class="left"><div class="name"><span>FileName :</span> <span>${name}</span></div><div class="size"><span>Size :</span> <span>${size}</span></div></div><div class="right"><a href="${link}" class="btn d-link">Download</a></div></div><div class="bottom"><div class="bar"></div><div class="msg">${
                settings.messageText
            }</div></div></div></div>`;
      $(this).replaceWith(code);
    });
    return $(".download-container").each(function(e) {
      var $this = $(this),
        link = $this.find(".d-link").attr("href"),
        duration = settings.duration * 1000;

      // Set Seconds to mark tag in msg
      $this.find(".msg mark").html(duration / 1000);

      $this.find(".btn").click(function(e) {
        e.preventDefault();

        // Add progress class to progress bar to animate it
        $this.find(".bar").addClass("progress");

        // Set data-duration to each download section
        $this.attr("data-duration", duration);

        // Set CSS Property to every Download Section to animate its progress bar
        $this.css("--duration", duration + "ms");

        // Create countdown in msg body
        var time = duration / 1000 - 1;
        var downloadTimer = setInterval(function() {
          if (time <= 0) {
            clearInterval(downloadTimer);
          }

          // Update mark element containing seconds in msg body
          $this.find(".msg mark").html(time);
          time--;
        }, 1000);

        setTimeout(() => {
          //  Remove class progress from progress bar
          $this.find(".bar").removeClass("progress");

          // Redirect to the link
          window.location.href = link;
        }, $this.data("duration"));
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $("a[download]").download({
    duration: 10
  });
}); /*]]>*/ </script>

In the above code replace 10 with the number of seconds you want to countdown to start from and #52aeff with your desired color.

Now paste the code which you have copied after or just below the jQuery library.

Your code should look like this.

Add In Your Posts:

To add this download section to your post or article you need to add a link like this as HTML code.

<a download="" href="#" data-name="File Name Here" data-size="File Size Here" data-href="REDIRECT_LINK_HERE">Link Text</a>

Ending:

If you followed all the steps given above then you have successfully added the download countdown timer to your website. You can add as many download sections to your article as you want. In case I have missed anything do let me know in the comments.

I know that the above method is little lengthy and may be tricky for new bloggers who are still at learning phase but trust me adding this script is not rocket science it is very easy and once you add it you will get all the benefits which I have mentioned above.

I hope this blog post on Download countdown timer for Blogger was easy to understand and implement. If you find any difficulties while implementing this widget then comment below, I would surely help you.

If you like this post and also this blog then do subscribe to our newsletter. This blog is made to help people using Google Blogger and we keep posting tips and tricks related to Blogger.

That's all for today, we will get back with a new post soon. Till then, take care and enjoy Blogging.