Welcome to the Droidnur123 tech blog. So today in this amazing article, we will Talk about the 3 Best Download Button With Timer | Download Timer Script. And what is this & how can we use them? So we will know all these things in this article. So stay in this article and know more in full detail. You can also Get the Latest Html and Javascript code in 2021 with a Complete Guide.
What is Download Timer?
So, before knowing about Add Download Button With Timer | download timer script | javascript countdown 10 seconds we get to know about this Download Timer.
So let me tell you that this is a process There is a countdown ( 5 seconds,10 seconds, Or As You Wish) of a certain time before downloading anything. This is the process that we call Download Timer.
Free Download Button With Timer Blogger
If you still using Blogger for publishing your blog post And Also, your blog is a content downloading blog. So I think you must have thought that at some time you should earn a good amount too.
So for this bloggers can use Download Timer as well. Using doing this, people will stay on your blog for the time you have decided. Of course, that will maintain Your blog Bounce Rate as well.
Countdown Download Timer HTML Script
Before That, let me tell you that one this download Timer's Some feature is made by Coding. HTML and JavaScript have been used in this Download Button With Timer.
If you notice many tools or Widgets related to online web development Coding has great importance in everything. Nowadays people with Coding skills are earning a decent amount even sitting at home easily.
Download Timer For Blogger & WordPress
We wrote an article on this same topic "10 Second Countdown Download Button" But in that, I had told about such a script that used to be redirected to another page as soon as the timer was over.
But today I am going to tell you about a new script. That After the timer runs out, A Download Button Will appear After that you will be downloaded only after whenever clicking on it.
The script that I had told earlier, worked only in Blogger's blog. But you can easily use this script on a WordPress website as well.
How To Use Download Timer?
So below I have tried to explain all those steps in detail. Due to which help of which you can easily use this Download Timer Widget. So please follow the steps below carefully.
Script No 1: Download Timer Button Html & javascript code
( 1 ) First of all Copy the Download Timer's Script Bellow.
<div dir="ltr" style="text-align: left;" trbidi="on">
<body>
<center>
<span id="countdown">You have to wait 15 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>Download Timer</b><br />
<a href="#" id="download_link" style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh870uKbnGvFPVQtZ4qEQ7Ib7g6LN34LdTeWKrOJg8fd2te2N6W4N3ELGgJtpBpDZKqixxHTwg974cTOfSoild4MfD-S2_AYrRp3VWGXWO1tfgMG0yK8dcNZnFmmiXrxgbISkMmq6b4Zzs/s1600/but.jpg" /></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>
</body></div>( 2 ) Now you have to paste this code wherever you want to use this. if you are planning to insert it in a post or page please insert it in HTML Mode Not Compose Mode.
( 3 ) Now you need to paste your download link to this code at the place of #.
( 4 ) And if you want to change the time, then you need to change the value of "var count = 15; "
( 5 ) When all prosses are done please save or Update them.
Demo
Script No 2: Download timer script & javascript countdown 10 seconds
Features of this advanced download timer
| Type | Information |
|---|---|
| 100% Responsive | Yes |
| Everything Customizable | Yes |
| Custom File Name & Space | Yes |
| New Uploader Credit | Yes |
| Comfortable With Blogger And WordPress Themes | Yes |
How To Install download timer script?
( 1 ) As Usual Login To Blogger Dashboard > Then Theme > Edit HTML Next to customize > Fiend For </b:skin> Or </head> tag
<style>
body {
font-family: system-ui;
background: #ddd;
color: white;
text-align: center;
}
#downloadinfo {max-width:100%;margin:auto;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: 20px;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: &#39;&#39;;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;border: 1px solid #3b7d5f;background-color: #3b7d5f;color: #fff;border-radius: 3px}
</style>
( 2 ) After That Copy, the flowing javascript and past it before the </body> tag And Don't Forget to Save your template
<script>
//<![CDATA[
var _0x369e=["\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\x72\x6F\x69\x64\x6E\x75\x72\x31\x32\x33\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","\x44\x72\x6F\x69\x64\x6E\x75\x72\x20\x31\x32\x33"];var _0x19d2=[_0x369e[0],_0x369e[1],_0x369e[2],_0x369e[3],_0x369e[4],_0x369e[5],_0x369e[6],_0x369e[7],_0x369e[8],_0x369e[9],_0x369e[10],_0x369e[11],_0x369e[12],_0x369e[13],_0x369e[14],_0x369e[15],_0x369e[16],_0x369e[17],_0x369e[18],_0x369e[19],_0x369e[20],_0x369e[21],_0x369e[22],_0x369e[23]];var downloadButton=document[_0x19d2[1]](_0x19d2[0]);var counter=5;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 _0x646cx8=document[_0x19d2[1]](_0x19d2[16]);null== _0x646cx8&& (window[_0x19d2[18]][_0x19d2[17]]= _0x19d2[19]),_0x646cx8[_0x19d2[20]](_0x19d2[17],_0x19d2[19]),_0x646cx8[_0x19d2[20]](_0x19d2[21],_0x19d2[22]),(_0x646cx8[_0x19d2[4]]= _0x19d2[23])}
//]]>
</script>( 3 ) At last Copy The HTML code Paste where you want to add the download timer
<div id='downloadinfo'>
<div class='downx'><button id="dgnbtn">Get Download Link</button><a href="Past your Donload Links Hhre" id="download" class="button"><button>Download</button></a></div>
<div id="dgnfile"><span class="file-size">File Name: Enter Your File Name</span>
<span class="uploader">Uploaded By: Droidnur 123</span><span class="file-size">File Size: 356kb</span> </div><a href='https://droidnur123.blogspot.com/' id='downloadx' target='_blank'></a>
</div>That's It's! Now Publish 0r update your Post. see the result on your blog.
How did you like the post 3 Best Download Button With Timer | Download Timer Script Free? Please, share your opinion with us in the comment box below.