Hello Friends, This is a very popular free Advanced Download Timer Script for Blogger and WordPress. If you have lots of content, you can use this script to time the download button.
Demo Video
New Page Code
<center>
<!--Google Adsense Code-->
<br>
<center>
<style>#postTitle{text-align: center;}</style>
<button id="download-btn" onclick="generate()">
<i class="fa fa-download"></i> Download Now
</button>
<div id="refresh" style="display: none; font-size: 18px;"><b>Thanks!</b><br> Your download will start in few seconds... <br> If not then,</div>
<a href="" id="re-download-btn" style="display: none;">Click Here</a>
<script>
function generate() {
var j = document.getElementById("refresh");
var e, n = document.getElementById("re-download-btn"),
t = document.getElementById("download-btn"),
a = document.getElementById("re-download-btn").href,
l = 5,
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),
j.style.display = "contents",
n.style.display = "inline") : (d.innerHTML = "<div class='waiting'>Please Wait...</div><div class='timer'>" + l.toString() + "</div> <div class='second'>Seconds</div>",
t.style.display = "none")
}, 1e3)
}
</script>
<style>
button#download-btn {
padding: 10px 25px 10px 25px;
border: none;
border-radius: 5px;
color: white;
background: dodgerblue;
font-weight: 600;
}
button#download-btn:hover {
background: royalblue;
}
.timer {
background: bisque;
width: 5%;
padding: 10px;
font-size: 25px;
border-radius: 50%;
width: 7%;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<script>
document.getElementById("re-download-btn").href=localStorage.getItem("Download Link");
document.getElementById("postTitle").innerHTML = localStorage.getItem("Post Title");
</script>
</center>
<br><br>
<!--Google Adsense Code-->
</center>
CSS Code
<style>
/* countdown time redirect button css */
#redirect-download{
padding: 10px 25px 10px 25px;
border: none;
border-radius:5px;
color: white;
background: dodgerblue;
font-weight: 600;
}
#redirect-download:hover{
background:royalblue;
}
</style>
JavaScript
<script>
document.getElementById("post-Title").innerHTML = document.getElementById("postTitle").innerHTML;
var postTitle = document.getElementById("postTitle").innerHTML;
function redirectbtn(){
localStorage.setItem("Post Title", postTitle)
localStorage.setItem("Download Link",link);
return false;
}
</script>
HTML Code
<center>
<!-- Google Adsense Code-->
<h2 style="margin: 0px;">Download<span id="post-Title"></span></h2>
<form action="Page Download Link" target="_blank" style="margin-bottom: 15px;">
<button id="redirect-download" onclick="redirectbtn();"><i class="fa fa-download"></i> Download Now</button>
</form>
<!-- Google Adsense Code-->
</center>
<script>
// download link paste here
var link = "Download Link";
</script>
Search
<h1 class entry-title'
Add This id
id="postTitle"