Add Download Countdown Timer in Blogger & WordPress

 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 type='text/javascript'>!function(a){a.fn.download=function(n){var i=a.extend({},{messageText:"Your download will automatically start in <mark>10</mark> seconds. If not click download button again!",duration:1},n),d=0;return a(this).each(function(){let n=a(this).data("href"),s,t=`<div class="download-container" data-index="${d++}"><div class="content"><div class="top"><div class="left"><div class="name"><span>FileName :</span> <span>${a(this).data("name")}</span></div><div class="size"><span>Size :</span> <span>${a(this).data("size")}</span></div></div><div class="right"><a href="${n}" class="btn d-link">Download</a></div></div><div class="bottom"><div class="bar"></div><div class="msg">${i.messageText}</div></div></div></div>`;a(this).replaceWith(t)}),a(".download-container").each(function(n){var d=a(this),s=d.find(".d-link").attr("href"),t=1e3*i.duration;d.find(".msg mark").html(t/1e3),d.find(".btn").click(function(a){a.preventDefault(),d.find(".bar").addClass("progress"),d.attr("data-duration",t),d.css("--duration",t+"ms");var n=t/1e3-1,i=setInterval(function(){n<=0&&clearInterval(i),d.find(".msg mark").html(n),n--},1e3);setTimeout(()=>{d.find(".bar").removeClass("progress"),window.location.href=s},d.data("duration"))})})}}(jQuery),$(document).ready(function(){$("[download]").download({duration:10})});</script>

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

In Blogger you need to comment your JavaScript code. So before the JavaScript code add /*<![CDATA[*/ and at the end, add /*]]>*/

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.