How to Add a Direct Download Button in Your Blogger Blog Post with Countdown

How to add direct download button in blogger

Adding a timer download button to your Blogger blog post is a fantastic way to improve user engagement, manage downloads, and even add a professional touch to your blog. This feature is especially useful for bloggers who share downloadable resources like eBooks, templates, or software. By implementing a timer-based download button, you can encourage users to stay on your site longer, which can help improve metrics like session duration and bounce rate.

In this article, we’ll guide you through the step-by-step process of creating a timer-based download button using HTML, CSS, and JavaScript. Whether you’re a beginner or have some experience with coding, this tutorial will equip you with the knowledge to implement this feature seamlessly on your Blogger site. Let’s dive in!

  

<!-- download button code start-->
  <style>
.download-Timer-btn{
  outline: none;
  border: none;
  color: #fff;
  display: flex;
  cursor: pointer;
  padding: 16px 25px;
  border-radius: 6px;
  align-items: center;
  white-space: nowrap;
  background: #4A98F7;
  transition: all 0.2s ease;
}
.download-Timer-btn:hover{
  background: #262d3d;
}
.download-Timer-btn.timer{
  color: #000;
  background: none;
  transition: none;
  font-size: 1.6rem;
  pointer-events: none;
}
.download-Timer-btn.timer b{
  color: #4A98F7;
  padding: 0 8px;
}
.download-Timer-btn .icon{
  font-size: 2rem;
}
.download-Timer-btn .text{
  font-size: 1.5rem;
  padding-left: 10px;
}
.download-Timer-btn svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
}
</style>

<button class="download-Timer-btn" data-timer="10">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>progress-download</title><path d="M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z" /></svg>
      <span class="text">Download Now</span>
    </button>

<script>
const downloadBtn = document.querySelector(".download-Timer-btn");
const fileLink = "Here is your download file link";

const initTimer = () => {
    if(downloadBtn.classList.contains("disable-timer")) {
        return location.href = fileLink;
    }
    let timer = downloadBtn.dataset.timer;
    downloadBtn.classList.add("timer");
    downloadBtn.innerHTML = `Your download will begin in <b>${timer}</b> seconds`;
    const initCounter = setInterval(() => {
        if(timer > 0) {
            timer--;
            return downloadBtn.innerHTML = `Your download will begin in <b>${timer}</b> seconds`;
        }
        clearInterval(initCounter);
        location.href = fileLink;
        downloadBtn.innerText = "Your file is downloading...";
        setTimeout(() => {
            downloadBtn.classList.replace("timer", "disable-timer");
            downloadBtn.innerHTML = `<span class="text">Download Again</span>`;
        }, 3000);
    }, 1000);
}

downloadBtn.addEventListener("click", initTimer);
    </script>
  <!-- download button code end -->

First of all copy above code and then go to your blogger blog post where you want to add download button, after that paste this code.

How to Add a Direct Download Button in Your Blogger Blog Post with Countdown

Look at the screenshot and see in the first red mark there is given 10 second timer by default, If you want to modify it you can do it, you can increase and decrease the timer. And in the second mark paste your download file link.

To get your download file link first upload your file in google drive and click share button and then copy the file link of your google drive then go to this link https://www.techyleaf.in/google-drive-direct-link-generator/ and paste your google drive link and then click on Submit after that copy the link generated by this tool and paste it into the second red mark on screenshot. And that's it, your work is done.

Thanks for reading full article and If you found this article helpful, please share it to your friends..

Freelancing Tips & Tricks

Post a Comment

Post a Comment

Contact Form