How to add a Download Timer button in Blogger & WordPress?
Are you looking for a Download Timer script for the Blogger website? Then this article definitely helps you in that.
Here, in this article, I will show you how you can add a download timer button to your Blogger website easily and customize it according to your choice.
You can also use the same script for your Wordpress website. You just need to add the script using a custom HTML block inside the post editor.
What is Download Timer and how it works?
Download timer is a simple javascript code that starts a count down of 15 sec or the time set and shows you the download link after the time is over. As it reveals the download link after some time, that’s why it is called a download timer.
Here you can set the time according to your choice and when the timer will stop, the download button will appear in the blog post. So, When a user will click on the button the link will open in a new tab and the user can able to download the file.
Benefits of Download timer widget
If you are running a blog where users come to download a file and leave the site as soon as the download starts then you should implement the download timer script in your Blogger and Wordpress website.
In this way, you can ask the user to wait some time before downloading the file and you will get some dwell time in your website and the bounce rate will reduce for that blog posts.
Another benefit of implementing a countdown timer is that it helps you boost the Adsense revenue by engaging the user more time on a webpage. in this way, you can increase the chances of getting more impressions and clicking on your ads.
How to add a Download timer button in Blogger?
To add a 15 seconds download timer button to your blogger website, follow the steps carefully.
Step-1: Go to Blogger dashboard and open the blog post with HTML view.
Step-2: Now copy the below download script and paste it into the blog post editor.
<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown">You have to wait 15 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>Generating Download Link...</b><br />
<a class='button' href="#" target="_blank" id="download_link" style="display: none;">Download Now</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></div>Step-3: Now change the download timer sec highlighted above ( Here 15 sec)
Step-4: Now you have to add the download link in the above script. so replace the # value with the download link.
Step-5: Now you can change the download link with a button. Just add /download/button after the anchor text. (For Templateify themes).
Now hit the publish button and the 15 seconds download timer button is added to your blogger website.
Video Guide
If you are a visual learner then I have prepared a detailed video on how to add a download timer button in blogger with the step-by-step guide.
Here you can see the demo, how the download timer script works. If the download timer is stoped then you can refresh the page to start the download timer again.
By the way, you can download the above count-down script by clicking on the download button.
Note that If you are using themes like Fletro or Median UI theme then you have to add the button class in the anchor element in the above code.
So, you can download the “Download timer button” script with the Button class from the above button.
Check Out the Updated Download timer (2024)
If you have any doubts or trouble during the setup of the download timer script in your blogger website then you can ask me in the comment section.
New Download Timer script 2023
Here, the Timer Run on the button itself when the user clicks on it. So, If you want a clean and simple download timer button, then you can use the code below.
<button id="my-download-btn">Download</button>
<style>
#my-download-btn {
background-color: #4CAF50; /* Change Background Color */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#my-download-btn:hover {
background-color: #3e8e41; /* Change Button Hover Color */
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
</style>
<script>
const downloadBtn = document.getElementById("my-download-btn");
const countdown = 10; // Set the countdown time in seconds
downloadBtn.addEventListener("click", () => {
let counter = countdown;
const countdownInterval = setInterval(() => {
// Update the button text with the remaining time
downloadBtn.innerHTML = `Download (${counter})`;
// Animate the button text with CSS
downloadBtn.style.animation = "pulse 1s ease-in-out infinite";
if (counter === 0) {
// Stop the countdown and redirect to the download link
clearInterval(countdownInterval);
window.location.href = "https://example.com/";
}
counter--;
}, 1000);
});
</script>If you want a different Animation Effect in the button, use the below script.
<button id="my-download-btn">Download</button>
<style>
#my-download-btn {
background-color: #4CAF50; /* Change Background Color */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#my-download-btn:hover {
background-color: #3e8e41;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
</style>
<script>
const downloadBtn = document.getElementById("my-download-btn");
const countdown = 10; // Set the countdown time in seconds
downloadBtn.addEventListener("click", () => {
let counter = countdown;
const countdownInterval = setInterval(() => {
// Update the button text with the remaining time
downloadBtn.innerHTML = `Download (${counter})`;
// Animate the button text with CSS
downloadBtn.style.animation = "blink 1s infinite";
if (counter === 0) {
// Stop the countdown and redirect to the download link
clearInterval(countdownInterval);
window.location.href = "https://example.com/";
}
counter--;
}, 1000);
});
</script>
If you want to use Multiple Download timer button on the same page, then you can use the code below.
<button class="my-download-btn" data-countdown="10" data-url="https://example.com/file1">Download 1</button>
<button class="my-download-btn" data-countdown="15" data-url="https://example.com/file2">Download 2</button>
<button class="my-download-btn" data-countdown="20" data-url="https://example.com/file3">Download 3</button>
<style>
.my-download-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.my-download-btn:hover {
background-color: #3e8e41;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
</style>
<script>
let countdownInterval;
function startCountdown(button, countdown, url) {
let counter = countdown;
countdownInterval = setInterval(() => {
button.innerHTML = `Download (${counter})`;
button.style.animation = "pulse 1s ease-in-out infinite";
if (counter === 0) {
clearInterval(countdownInterval);
button.style.animation = "";
button.innerHTML = button.getAttribute("data-original-text");
window.location.href = url;
}
counter--;
}, 1000);
}
const downloadBtns = document.querySelectorAll(".my-download-btn");
downloadBtns.forEach(button => {
button.setAttribute("data-original-text", button.textContent);
button.addEventListener("click", () => {
if (countdownInterval) {
clearInterval(countdownInterval);
downloadBtns.forEach(btn => {
btn.style.animation = "";
btn.innerHTML = btn.getAttribute("data-original-text");
});
}
const countdown = parseInt(button.getAttribute("data-countdown"));
const url = button.getAttribute("data-url");
startCountdown(button, countdown, url);
});
});
</script>New Download Timer script 2024
For More awesome Tutorials, don’t forget to Subscribe to our YouTube channel and Join our Telegram Group.
Read More: How to add Pros and cons Table in Blogger.
Bro wordpress site k liye btao plzz wordpress k liye btao sir plzz help me,
Hey, I have tried the Download timer code in WordPress using the custom HTML block and it is working properly.
Sir, download button doesn't show, instead it shows a hyperlinked "Download/download/button"
This is a short-code for templateify theme. You can use the button class in the anchor tag to enable button on your theme. Like for themes like median UI use the class <a class='button' in the HTML anchor.
I have updated the code, just download the code from the button given below the video.
Which Theme You are Using Know
Fletro pro
Please Sir You Can Say this Template Version . 🙏
it is the Fletro pro 6.0 with little modification.
bro i can uploaded fletro theme 6.1 but can not able to customize
can you help me how to customize it
Yes, I have already made a customization video on Fletro pro theme on Key2blogging YouTube channel, you can also join our telegram group and share your doubts there.