How to Add a Download Timer Button in Blogger & WordPress

Adding a download timer button to your blog can enhance user experience by creating anticipation and ensuring they stay engaged with your content. Whether you’re using WordPress or Blogger, integrating a download timer button is relatively simple. In this article, we’ll walk you through the steps of adding a new download timer button in WordPress and Blogger using multiple methods.

Method 1: Use JavaScript

For WordPress & Blogger

Open your WordPress dashboard (or) Go to Blogger Control Panel
Add a new post or edit an existing post: Go to Posts > New Post or select an existing post to edit.
Add HTML Widget: In the editor, add HTML widget.
Insert code:

				
					<!--Use this code to redirect to the download page/ dowload file link-->

<button id="downloadBtn">Download</button>
<script>
document.getElementById('downloadBtn').addEventListener('click', function() {
    this.disabled = true;
    let counter = 5; // Set the timer duration in seconds
    let downloadUrl = 'your-download-link-here'; // Replace with your download link
    let interval = setInterval(() => {
        this.innerText = `Downloading in ${counter} seconds...`;
        counter--;
        if (counter < 0) {
            clearInterval(interval);
           // window.location.href = downloadUrl; //same page redirect
             window.open(downloadUrl, '_blank'); // new page redirect
        }
    }, 1000);
});
</script>

				
					<!--Use this code to download file without redirecting/leaving the page-->

<center>
    <button id="downloadButtonLink" onclick="startDownload()" class="btn"> Download Now</button>
    <p id="timerText" style="display: none;"><big> Your File will download in <span id="countdown">15</span> seconds...</big></p>
</center>

<script>
    function startDownload() {
        // Hide the download button
        document.getElementById('downloadButtonLink').style.display = 'none';

        // Show the timer text
        let timerText = document.getElementById('timerText');
        timerText.style.display = 'block';

        // Start the countdown
        let countdown = 15;
        let interval = setInterval(function() {
            countdown--;
            document.getElementById('countdown').textContent = countdown;

            if (countdown <= 0) {
                clearInterval(interval);
                timerText.textContent = 'Your download is starting...';

                // Create a link element to trigger the download
                let link = document.createElement('a');
                link.href = 'your-download-link-here'; // Replace with your download link
                link.download = 'your-download-link-name-here'; // Replace with your download file name
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                // Update the text to indicate the file was downloaded
                timerText.textContent = 'Your file was downloaded.';
            }
        }, 1000);
    }
</script>

Replace “your-download-link-here” with the actual URL of the downloaded file.

Publish/Update Post: Save changes by publishing or updating a post.

Method 2: Just use HTML and CSS

For an easier approach that doesn’t require JavaScript, you can use CSS animations to simulate a countdown effect.

For WordPress and Blogger

Add HTML and CSS: Insert the following code into the HTML view of your post or page:

				
					<style>
.download-btn {
    position: relative;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    text-align: center;
}
.download-btn:after {
    content: '5';
    position: absolute;
    right: -20px;
    font-size: 16px;
    animation: countdown 5s linear forwards;
}
@keyframes countdown {
    0% { content: '5'; }
    20% { content: '4'; }
    40% { content: '3'; }
    60% { content: '2'; }
    80% { content: '1'; }
    100% { content: '0'; }
}
</style>

<button class="download-btn" onclick="setTimeout(() => { window.location.href = 'your-download-link-here'; }, 5000);">
    Download
</button>

Replace 'your-download-link-here' with your actual download URL.

Publish/Update the Post: Save and publish or update your post.

Conclusion

Adding a download timer button to your WordPress or Blogger site can significantly improve user engagement and enhance the overall user experience. Whether you prefer using JavaScript, plugins, or pure HTML/CSS, the methods outlined above should help you implement a download timer button with ease.

I hope this article helped you to learn How to Add a Download Timer Button in Blogger & WordPress. If you have any doubts or problem with the code, comment below to find the solutions. Also share this blog if you find this useful.

Want to build professional website for your Business or Store, Get a free quote here

Click here to get Premium Plugins and Themes at rs.249. Get 20% Off on your first order “WELCOME20”