How To add a Timer Download button on Blogger

 How To add a Timer Download button on Blogger

Hello there welcome to my blog, Today I will be showing you how to Add a Download Button with a timer on Blogger 

How helpful is Download button with a timer ?

•it helps With your earnings from Your advertisements when People stay much longer on your site the ad revenue increases 

How to add Download Button with a timer

Now let's get into Our main topic of the day which is How to add a Download Button with a timer on Blogger 

Follow the steps shown Bellow 

1. Add this below Code  Before </head> tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

After adding the code just click save and exit The HTML section and go to your Post or page where you want to add your button 

Then click on the HTML view and copy the below code 

2. Paste this code below in Posts HTML View.

<style>
.button {
    background-color: DodgerBlue;
    border: none;
    color: white;
    font-family: Arial;
    font-size: 20px;
    text-decoration: none;
    padding: 12px 30px;
   cursor: pointer;
}
  
  .button:hover {
  background-color: RoyalBlue;
}
  
.ddd{
    background-color: RoyalBlue;
    border: none;
    font-family: Arial;
    font-size: 20px;
    text-decoration: none;
    padding: 12px 30px;
    color: white;
  cursor: pointer;
  }
  
  .ddd:hover {
  background-color: DodgerBlue;
}
</style>

<div style="text-align: center;">
<a class="button" href="https://yourdownloadinglinkhere.com" id="download" target="_blank"><i class="fa fa-download"></i>Download Now</a>

<button class="ddd" id="btn"><i class="fa fa-download"></i>Download Here</button>

<script>
var downloadButton = document.getElementById("download");
var counter = 35;
var newElement = document.createElement("p");
newElement.innerHTML = "<b>35 seconds to Wait.</b>";
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() + " <b> seconds to Wait.</b>";
        }
    }, 1000);
};

var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
</script></div>

Now after adding this code switch to composed view then click  those words which will be show then click the link icon and your done, easy as that 

I hope you Enjoyed today's bloggin Tips post :bye