We can updating our site. 💖 Some link are not working. So please try to second link

How to Create a Download Button With Countdown Time in Blogger?

How to Create A Download Button In Blogger With Count Down Timer Best Way To Increase your AdSense Earnings With Timer Button
How to Create a Download Button With Countdown Time in Blogger?

Hello Everyone, Today continues with the topic of Blogger/Blogspot, I will guide you how to create a Timed Download Button and this will help our Blog reduce bounce rate.

How Timed Download Button Works

When the button is clicked, a JS will be executed to count the time, after the timeout expires, the user will have to keep clicking the Button again to go to the landing page.

Demo Button Download Countdown Time

Click To Download

Note: Some Blogger Templates May Not Properly Working I Suggestion You Use In Median Ui Blogger Template

How to do it

Step 1: Log in to Blogger.com

Step 2: Click Theme and select Edit HTML

Step 3: Add a short CSS to display Time

You copy the code below and paste it before the closing tag </head> or in the Post you want to use Button

<style>

    ascolor {

        color: #214ECF;

        font-size: 1.5em

    }

    

    astext {

        font-weight: bold;

        font-family: var(--font-body-alt)

    }

</style>
Step 4: You copy the JS below and insert it before </body> or in the Post you want to use this Button
<script>

    var downloadButton = document.getElementById("download");

    var counter = 15;

    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 = "<astext>Please wait <ascolor>" + counter.toString() + " </ascolor>second.</astext>"

            }

        }, 1000)

    };

    var clickbtn = document.getElementById("btn");

    clickbtn.onclick = startDownload;

</script>
Step:5 Now Click the Save button
Step 6: You insert the following code into the article you need to use the countdown button
Code<center><a class="button" href="/p/redirect.html?t=https://www.fcthemes.eu.org" id="download"><i class="icon download"></i> Click To Download </a>

<button class="button" id="btn"><i class="icon download"></i> Download </button></center>

Please replace the Highlighted part with your URL!

That's it, it's very simple, just a few steps I have guided you to successfully add Button Download countdown time for Blogger/Blogspot. Good luck!


Rate Articles:

Post a Comment

Please Don't Add Links 😠 I hate spam
© FC Themes. All rights reserved. Premium By FC Themes