How To Add Download Countdown Timer For Blogger 2024

 To add a download countdown timer for Blogger, follow these steps:

1. Log in to your Blogger dashboard.

2. Scroll down and click on "Pages" to add a new page.

3. Click on the HTML view and delete all existing HTML codes.

4. Copy and paste the following code.

5. Change the countdown timer: By default, the countdown timer is set for 15 seconds. If you want to change it, replace all instances of "15" with your desired number.

6. Add your Adsense Ad code: Insert your Adsense Ad code where you want -- Optional Step

7. Save and publish your page: After following the above steps, click on "Save" and publish your page.

8. Add the code where you want the timer: You can add this code wherever you want the download countdown timer to appear on your Blogger page.

Copy Paste Code According Above Steps 

<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 = "https://drive.google.com/u/0/uc?id=1sBCz8x5xPZwsv8S8KCkznhfEP8r3BPfi&export=download";

// Replace Above Link to Your Own 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>

Demo Download Button