Add Countdown Timer Download Button Blogger[3+ Scripts]

Add Countdown Timer Download Button in Blogger Website[Best 3+ Scripts]

How to Add Countdown Timer Download Button Html Code for Website. Get countdown timer button HTML and JavaScript code for a website to make Download Link appears after a countdown. There is no plugin for the blogger website to do these tasks but with the use of small JavaScript code, we can easily make a countdown timer download button on any website.

In our Technical Arp website, we use this so many users of my website want to know how to make a countdown timer before a download link appears. So In this post, along with the Advanced and Beautiful Bootstrap designed we use on our website I will provide 3 Scripts.

Add Countdown Timer Download Button in Website
Add Countdown Timer Download Button in Website

Before adding the Download button with Countdown in the blogger website you must read some points like advantages and disadvantages.

Why Add a download button with a timer in Blogger or any website?

In our website and many games, mod apps, and software download websites use this kind of script. Visitors click on the download button then they have to wait for some timer after the download link appears and start their download. why you have to do this on your blog? you can place an advertisement above and below the download button and timer. there is any chance to get more clicks on your ads. And the best thing about this script is you can put some message before the download link appears.

However, you can use this at any place like in URL shortener websites or anywhere. So, if you would like to add a countdown timer before a download button link appears on the download page. then just follow the simple steps below.

Advantage of Using Download Timer Button in website

When visitors stay for a long time on your website then your website's Bounce rate decreases which are very useful for your website. One can place different ads below and above of Download Button and may get more click. So If you are facing more bounce rate issues then you must try this script.

In WordPress, you will find many plugins but for the Php website or any custom website or even in blogger we don't have this function. Therefore Use any of the Best 3 Scripts to make a Countdown timer Download button from below.

More Useful Script: Install Anti Adblock Script in Blogger and Adblock Detection Script

So Let's Start -


3 Methods to Make Download Button with Timer using JavaScript and HTML 

In this post, I will share 3 Script so as per your need and design fit for your website choose any of them. Even you can use all three of them.

Script 1 / First Method

Add Countdown Timer on Download Button using Javascript

Steps to follow to use in your blogger template:

  1. Go to Blogger Dashboard
  2. Go to Post and Create New Post
  3. Change from Composer view to HTML View 
  4. Download the Complete Code of all methods from below Download Section.
  5. Just Paste All Code of Method 1 and replace URL Here to your Download Link.
  6. That's it - Simple JavaScript If you know how to play with CSS then you can edit it.

Copy Script by double click on below code:


<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<br />
<span style=”font-size: x-large;”><br /></span>
<br />
<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<script>
var count = 15; // Number of remaining seconds.
var counter; // Handle for the countdown event.

function start() {
counter = setInterval(timer, 1000);
}

function timer() {
// Show the number of remaining seconds on the web page.
var output = document.getElementById(“displaySeconds”);
output.innerHTML = count;

// Decrease the remaining number of seconds by one.
count–;

// Check if the counter has reached zero.
if (count < 0) { // If the counter has reached zero…
// Stop the counter.
clearInterval(counter);

// Start the download.
window.location.href = “URL Here”;
return;
}
}
// Start the countdown timer when the page loads.
window.addEventListener(“load”, start, false);
</script>

<br />
<span style=”font-size: x-large;”>You Will Be Redirected To Download Link In <b><span id=”displaySeconds”>15</span></b> Seconds.</span><br />

AdSense Code Here

<br />
<span style=”font-size: large;”><a href=”URL Here”>Click Here To Get The Download Link If Not Redirected.</a></span></div>
</div>

If you don't like this First Method then Go for the Second one which is a more Advanced Download Link with Timer using JavaScript, HTML & CSS.

Script 2 / Second Method

Add Automatic Countdown Timer with Download Link Button using Javascript

In this, you will get Two Similar Script but with a small modification of the script.

  1. The first script that Used for the Automatical Countdown timer when the page is loaded
  2. Second Script works when users Click on Download Button then wait to get the download link.

Steps to follow to use in your blogger template:

  1. Go to Blogger Dashboard
  2. Go to Post and Create New Post
  3. Change from Composer view to HTML View 
  4. Download the Complete Code of all methods from below Download Section.
  5. Just Paste All Code of Method 1 and replace Download Link to your Download Link.
  6. That's it - Simple JavaScript If you know how to play with CSS then you can edit it.

Again Select below code by double click and copy it:


<center>
<span id=”countdown”>You have to wait 15 seconds.</span></center>

<div style=”text-align: center;”>
<b>Download Timer</b>

<a href=”Download Link” id=”download_link” style=”display: none;”><img border=”0″ data-original-height=”91″ data-original-width=”500″ height=”51″ img=”” src=”https://1.bp.blogspot.com/-T4L4-6tnpR4/XruqgBhI3MI/AAAAAAAACmM/4LB36Rpc60gaBF4XmQuS9pl3hgI0ERzUACLcBGAsYHQ/s200/Download-Buttons-transparent-PNG-images-715×715.png” /></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>

Now Second Script works when users Click on Download Button then wait to get the download link. After Download Button appears and the user can download it

Steps to Create Advanced Download Button with a countdown timer.

1. Go to Blogger Dashboard

2. Go to Theme/Template Section

3. Click Edit HTML

4. Now Search for   </head>  and Paste below CSS Style above </head> or Find & Past Below STYLE CSS Code Before  ]]></b:skin> 

Place below code under style tag:


<style>

/* Download Button Timer CSS */
.buttonDownload{display:inline-block;position:relative;padding:10px 25px;background-color:#4cc713;color:#fff;font-family:sans-serif;text-decoration:none;font-size:.9em;text-align:center;text-indent:15px}.buttonDownload:hover{background-color:#333;color:#fff}.buttonDownload:after,.buttonDownload:before{content:’ ‘;display:block;position:absolute;left:15px;top:52%}.buttonDownload:before{width:10px;height:2px;border-style:solid;border-width:0 2px 2px}.buttonDownload:after{width:0;height:0;margin-left:3px;margin-top:-7px;border-style:solid;border-width:4px 4px 0 4px;border-color:transparent;border-top-color:inherit;animation:downloadArrow 2s linear infinite;animation-play-state:paused}.buttonDownload:hover:before{border-color:#4cc713}.buttonDownload:hover:after{border-top-color:#4cc713;animation-play-state:running}@keyframes downloadArrow{0%{margin-top:-7px;opacity:1}0.001%{margin-top:-15px;opacity:0}50%{opacity:1}100%{margin-top:0;opacity:0}}
</style>

5. Now Find & Past Below SCRIPT Code before </body>

Again Select below code by double click and copy it:


<script type=”application/javascript”>
function downloadStart(){
var message = “%d seconds before download link appears”;
// seconds before download link becomes visible
var count = 5;
var countdown_element = document.getElementById(“countdown”);
var download_link = document.getElementById(“download_link”);
var download_start = document.getElementById(“downloadStart”);
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.style.display = “initial”;
countdown_element.innerHTML = “You have to wait %d seconds.”.replace(“%d”, count);
download_start.style.display = “none”;
// decrease counter
count–;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = “none”;
// show download link
download_link.style.display = “”;
}
}, 1000);
};
</script>

6. Save Template and Open Post or Create a new post to check to work on the script.

7. Place in your Post/Article where you need to use this download button  HTML for Download Button


<div class="downloadButtonByTechnicalArp" style="text-align: center;">
<br />
Place your ADSENSE CODE - 1
<br>

	<span id="countdown" style="display:none;">You have to wait 15 seconds.</span>
<br />
<div style="text-align: center;">
	<a onClick="downloadStart()" id="downloadStart" class="buttonDownload" >Download</a><br />
	<a href="your link" id="download_link" class="buttonDownload"  style="display: none;">Download Now</a>
	<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
</div>
<br />
ADSENSE CODE - 1
<br>
</div>

That's It Use any of the above Script. Now Let me share my own Attractive & Responsive Design using Bootstrap.

Script 3 / Third Method

Responsive and Attractive Countdown Timer Download Button

Download Button with Timer: Bootstrap Designed: Used by Our website. NOTE: If you want to Use this Script then you must know some CSS to make changes according to your website.

Steps to Use this Script:

  1. All Steps are the same as mentioned in the second method.
  2. Just Use the below Code and use it.

<style>
/* Download Button Timer CSS */
#containerId{background:#37b8ef;}
.textCenter{}
.textTopic{color:#000; margin:1%;}
.textSize{font-size:14 px; color:#000;}
#arpianDownloadButton,#arpianDownloadButtonLink{padding:10px 20px;border:0;border-radius:5px;background:#fff;color:#000;float:right;text-transform:capitalize;font-weight:700;}
</style>

Now Place below code in your Post/Article where you need to use this download button */


<div class=”container-fluid” id=”containerId”>
<div class=”container” style=”margin:1%;”>

<div class=”textCenter”>
<P class=”textTopic” align=”center”><b>TITLE/Heading comes Here </b></P>
<div>
<span class=”textSize”><b>Click here 👇 to Download </b></span>
<button id=”arpianDownloadButton” onclick=”generate()”><i aria-hidden=”true” class=”fa fa-cloud-download”></i> download</button>
<a href=”#DOWNLOADLINK” id=”arpianDownloadButtonLink” style=”display: none;”><i aria-hidden=”true” class=”fa fa-cloud-download”></i> Re-download</a>
</div>
</div>

<!– Banner ads for download –>
<br />
<!–ADSENSE Code 1 for Banner Size–>
</div>

<div class=”table”>
<table class=”table table-bordered ” style=”background:#f7f7f7″>
<tbody>
<tr align=”center”>
<td>If it’s not downloaded automatically, Please Try Again & Click to Re-Download. And If Again not able to Downlaod Please Inform via the Contact Form page of this blog.
</td>
</tr>
</tbody>
</table>
</div>
</div>

<!--Script to Make Download Button with Timer-->


<script type=’text/javascript’>
//<![CDATA[ Load Time for Download
function generate(){
var e,n=document.getElementById(“arpianDownloadButtonLink”),
t=document.getElementById(“arpianDownloadButton”),
a=document.getElementById(“arpianDownloadButtonLink”).href,
//Time in seconds
l=40,
d=document.createElement(“span”);n.parentNode.replaceChild(d,n),
e=setInterval(function(){–l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display=”inline”):(d.innerHTML=”<i class=’fa fa-clock-o’ aria-hidden=’true’/> This file is preparing to download please wait. “+l.toString()+” Seconds….”,t.style.display=”none”)},1e3)}

//]]>
</script>

You won't be able to copy any script or CSS from above. So download all Script used in this form below Download link which is using our Download Button with Timer.


Download All Best 3 Javascript Code of Countdown Timer Before a Download link appears.

We provided all types of Download Countdown button Script in such a way that can be used for many events. Also Script we made for our website is also provided to you so you can check the demo by downloading all script from the below link.
  • Scroll Down and you will find Download Button
  • Click on it and Wait for 30 Seconds and Download Will Automatically Starts
  • If not then click on Re-Download and now no waiting Download will Start.
  • Also, Download More Script From Our Website.
  • Also use: Advanced HTML Sitemap Page on the Blogger website
Download button Countdown timer Script for Blogger
Click here 👇 to Download
If it's not downloaded automatically, Please Try Again & Click to Re-Download. And IF Again not able to Download Please Inform via the Contact Form page of this blog.

In Conclusion of  Add Countdown Timer Download Button in Website.

I have tried to be as informative as to provide all these scripts. Use any of the above-mentioned scripts and If you face any problems or have any suggestions. Let me know them in the comments section.

Thanks for Visting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.
 
Previous
Next Post »

1 comments:

Click here for comments