How to Add a Download Timer Button in Blogger

 Source Code:

<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: #ff9700; // *Box Background Colour*//

  transition: all 0.2s ease;

}

.download-Timer-btn:hover{

  background: #ca36f9; // *Box Background Colour after click*//

}

.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=1Bd7yV9WN4axzxf0Ba7CF4u1s5_BZKszT&export=download";

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>