How to Install Download Button With Timer Countdown

How to Install Download Button With Timer Countdown
Maybe you often see the download button that will automatically have a countdown timer like indishare and other URL shortener websites when we click and after the time finish will usually get a downloading link automatically to the page or directly download the file provided by the website owner.

This feature is especially for those websites /blogs that have downloading content like movies, songs, and games downloading websites or others. So with the tips of how to Install the Download Button with timer countdown and I will share the concept behind this.

I know you will be thinking that what's the advantage to add this feature to your blog/website. The reason for adding the download timer button before downloading is to reduce the level of Bounce Rate of your website when visitors visit the downloading page.


This code is highly customizable and you can change the time duration (seconds) to getting downloading links.  by default, this script the time duration has been set to 15 seconds.
The initial part of the script has a variable where you can set the time required for the download link to appear.

How to install Download Button with timer countdown

This script can be used as a countdown timer before displaying a download link or any other hyperlink on your blogs. This is a very basic script but you can make it more convenient for your blog by implementing this. So let's practice how to add a timer button before downloading. don't worry the installation is very simple just follow step by step procedure.

Step-1 Adding CSS

Log in into Blogger Dashboard >> Template >> Edit Html and copy the following CSS code just paste it above the </style> OR  ]]></b:skin> tag.
/* Install Download Button With Timer Countdown by dgntemplate */
#downloadinfo {box-shadow: 0 0 3px rgba(0,0,0,.12), 0 0 2px rgba(0,0,0,.24);border-radius: 3px;color:#fff;display: block;overflow:hidden;padding: 15px;text-align: center;box-sizing: border-box;background-color: #383c41}
#dgnfile{text-align: left;background-color: #ebebeb;font-size:18px;overflow: hidden;border-radius:3px;padding: 0} 
#downloadinfo .downx{height:49px}
#downloadinfo p{font-size:20px; line-height:35px;font-weight:700;margin:0px;height:49px}
.file-name, .file-size, .uploader {color: #333333; background-size: 20px;background-repeat: no-repeat;display: inline-block;padding: 6px 0 6px 40px;background-position: 10px}
.file-name{background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,2H6C4.89,2 4,2.89 4,4V20C4,21.11 4.89,22 6,22H18C19.11,22 20,21.11 20,20V8L14,2M12,19L8,15H10.5V12H13.5V15H16L12,19M13,9V3.5L18.5,9H13Z' fill='%2395b2f6'/%3E%3C/svg%3E")}
.file-size{background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,2H6C4.89,2 4,2.89 4,4V20C4,21.11 4.89,22 6,22H18C19.11,22 20,21.11 20,20V8L14,2M12,19L8,15H10.5V12H13.5V15H16L12,19M13,9V3.5L18.5,9H13Z' fill='%2395b2f6'/%3E%3C/svg%3E")}
.uploader {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z' fill='%2395b2f6'/%3E%3C/svg%3E");)}
button:before {content: '';background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;display: inline-block;width: 24px;height: 24px;padding: 0;vertical-align: -7px;margin-right: 5px}
button {font-size: 18px;font-weight: 700;padding: 6px 10px;border: 1px solid #3b7d5f;background-color: #3b7d5f;color: #fff;border-radius: 3px}

Step-2 Adding javascript

Now we have to add javascript, Copy the following javascript code and paste it just above the  </body> tag
<script type='text/javascript'>
//<![CDATA[
var _0x19d2=["\x64\x6F\x77\x6E\x6C\x6F\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x70","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","","\x72\x65\x70\x6C\x61\x63\x65\x43\x68\x69\x6C\x64","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x64\x69\x73\x70\x6C\x61\x79","\x73\x74\x79\x6C\x65","\x6E\x6F\x6E\x65","\x57\x61\x69\x74\x20","\x20\x73\x65\x63\x6F\x6E\x64\x73","\x64\x67\x6E\x62\x74\x6E","\x6F\x6E\x63\x6C\x69\x63\x6B","\x6F\x6E\x6C\x6F\x61\x64","\x64\x6F\x77\x6E\x6C\x6F\x61\x64\x78","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x64\x67\x6E\x74\x65\x6D\x70\x6C\x61\x74\x65\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x72\x65\x6C","\x64\x6F\x66\x6F\x6C\x6C\x6F\x77","\x64\x67\x6E\x74\x65\x6D\x70\x6C\x61\x74\x65"];var downloadButton=document[_0x19d2[1]](_0x19d2[0]);var counter=15;var newElement=document[_0x19d2[3]](_0x19d2[2]);newElement[_0x19d2[4]]= _0x19d2[5];var id;downloadButton[_0x19d2[7]][_0x19d2[6]](newElement,downloadButton);function startDownload(){this[_0x19d2[9]][_0x19d2[8]]= _0x19d2[10];id= setInterval(function(){counter--;if(counter< 0){newElement[_0x19d2[7]][_0x19d2[6]](downloadButton,newElement);clearInterval(id)}else {newElement[_0x19d2[4]]= _0x19d2[11]+ counter.toString()+ _0x19d2[12]}},1000)}var clickbtn=document[_0x19d2[1]](_0x19d2[13]);clickbtn[_0x19d2[14]]= startDownload;window[_0x19d2[15]]= function(){var _0x3c83x7=document[_0x19d2[1]](_0x19d2[16]);null== _0x3c83x7&& (window[_0x19d2[18]][_0x19d2[17]]= _0x19d2[19]),_0x3c83x7[_0x19d2[20]](_0x19d2[17],_0x19d2[19]),_0x3c83x7[_0x19d2[20]](_0x19d2[21],_0x19d2[22]),_0x3c83x7[_0x19d2[4]]= _0x19d2[23]}
//]]>
</script>
Pay attention to function var counter=15... This is the timer duration in seconds (15 means 15 seconds). You can change the delay as you wish.

Now Click the Save theme button.

Step-3 Adding Html code

This is the most important code which will be added to the blog post. Go to Blogger dashboard >> Posts >> New post and write a post. Now switch to HTML, not Compose and copy the following Html code and paste it where you want to appear timer download button. for example, like this...
<div id='downloadinfo'><div class='downx'><button id="dgnbtn">Get Download Link</button><a href="PutYourURL" id="download" class="button"><button>Download</button></a></div>
<div id="dgnfile"><span class="file-size">File Name: url generateor script</span>
<span class="uploader">Uploaded By: dgntemplate</span><span class="file-size">File Size: 256kb</span> 
</div><a href='https://dgntemplates.blogspot.com/' id='downloadx' target='_blank'></a>
</div>
Install Download Button With Timer Countdown
Pay attention to Highlighted text PutYourURL in the href="PutYourURL"tag. Replace this link with your downloading/destination link

Conclusion

That's all about How to Install the Download Box Button with a timer. I hope it is useful for you. If you have any doubts and problem please comment below. We are happy to help you! If you liked this post, then please do share it with your friends.

8 Comments

  1. Why page redirect automatic to your site

    ReplyDelete
    Replies
    1. Please pay attention on yellow highlighted text and change my web url with your downloading url in HTML code section.

      Delete
  2. Second download show green border when someone click on this..how to fix

    ReplyDelete
    Replies
    1. Search for this #3b7d5f and change as you want.

      Delete
  3. Replies
    1. Add this code in css

      #downloadinfo {border: 1px solid #000}

      Delete
  4. https://allmobilethemes.blogspot.com

    ReplyDelete

Don't miss the latest template notification from Dgntemplate