How to add download timer button in blogger

How to add download timer button in blogger 

How to add a download timer button in blogger

 To add a download timer button in Blogger, you can follow these steps:

1. First, you will need to create the button that will trigger the download and the timer. You can create a button using a graphic design tool like Canva or Photoshop, or you can use a pre-made button template that you can find online.

2. Once you have your button, you will need to upload it to an image hosting site like Imgur or Photobucket. You can do this by creating an account on the image hosting site, uploading your image, and then copying the direct link to the image.

3. Next, you will need to add the code for the download timer to your Blogger post. There are several different types of download timer scripts that you can use, but one popular option is the "jQuery Countdown Timer" script.

4. To use the jQuery Countdown Timer script, you will first need to download the script files from the official website. You can then upload the script files to your Blogger site by going to "Layout" > "Add a Gadget" > "HTML/JavaScript" and pasting the code for the script files.

5. Once you have uploaded the script files, you can add the code for the download timer button to your Blogger post. To do this, you will need to use HTML code to create a button that links to your file download and triggers the countdown timer.

6. Here is an example of the HTML code you can use:

   <a href="DOWNLOAD-LINK" class="download-button" download>Download Now!</a>

   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="PATH-TO-TIMER-SCRIPT"></script> <script> $(function () { $('.download-button').click(function () { var button = $(this); var countdown = button.next('.countdown'); button.hide(); countdown.show(); countdown.countdown({ until: +TIMER-VALUE, onExpiry: function () { button.show(); countdown.hide(); } }); }); }); </script>

   In this code, you will need to replace "DOWNLOAD-LINK" with the direct link to your file download, "PATH-TO-TIMER-SCRIPT" with the path to your uploaded jQuery Countdown Timer script files, and "TIMER-VALUE" with the number of seconds that you want the countdown timer to run for.

7. Once you have added the HTML code to your post, you should see a button that triggers the download and starts the countdown timer when clicked.

8. You can customize the appearance of your button and countdown timer by editing the CSS code for your Blogger site. To do this, go to "Theme" > "Customize" > "Advanced" > "Add CSS" and add your custom CSS code

FOLLOW THESE CODES

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>

JavaScript

<script type='text/javascript'>
//<![CDATA[
var downloadButton = document.getElementById("download");
var counter = 60;
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>

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>