How to Add Download Timer Button in Blogger - Grablem

Hello friends, In this post I will tell you how we can add download timer button in our blogger post. Follow the steps below to add a download timer button to your blogger website post.

Step 1: First of all, you have to go to the blogger dashboard, then you have to go to the theme section, there you have to click on the customize arrow and take a backup of the theme.

Step 2: After backing up the theme you have to click on Edit HTML. After that, copy the CSS code given below and paste it under the header tag section.

CSS

<style>
.astbutton {
    background: linear-gradient(99deg, rgba(2,0,36,1) 0%, rgba(0,255,196,1) 0%, rgba(242,242,242,0.9192270658263305) 100%);
    border: none;
    color: black;
    font-family: system-ui;
    font-size: 17px;
    text-decoration: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 19px;
}
    
.infoblogger{
    background: linear-gradient(99deg, rgba(2,0,36,1) 0%, rgba(0,255,196,1) 0%, rgba(242,242,242,0.9192270658263305) 100%);
    border: none;
    color: black;
    font-family: system-ui;
    font-size: 17px;
    text-decoration: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 19px;
}
    
</style>

Step 3: After that you have to copy the Javascript code below and paste it above the closing body tag at the bottom of the edit html section of blogger and save it.

JavaScript

<script type='text/javascript'>
//<![CDATA[
var downloadButton = document.getElementById("download");
var counter = 5;
var newElement = document.createElement("p");
newElement.innerHTML = "";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
function startDownload() {
    this.style.display = 'none';
    id = setInterval(function () {
        counter--;
        if (counter < 0) {
            newElement.parentNode.replaceChild(downloadButton, newElement);
            clearInterval(id);
        } else {
            newElement.innerHTML = +counter.toString() + " second.";
        }
    }, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
//]]>
</script>

Step 4: After that you have to copy the html code given below, Go to the blogger post in which you want to add this button, Click on html section and there this html paste the code.

HTML

<div><br /></div>
<div style="text-align: center;"><a class="astbutton" href="####" id="download" target="_blank"> Download File </a><button class="infoblogger" id="btn"> Click Here </button> 
</div>

I hope if you have followed all the above steps correctly then you will have added download timer button in your blogger post. Even after this if you have any problem then you can comment me.