If you want to do guest posting click here. Guest Post!

How to Add Download Button with Countdown Timer on Blogger

How to Add Download Button with Countdown Timer on Blogger

Hello Friends, Welcome to The Kathait. In today's article, we are going to learn "How to Add Download Button with Countdown Timer in Blogger." who don't know what is download button with timer it is a normal HTML button when you click on this download it will start countdown you can get your download link after count end. 

What is Download Countdown Timer?

I recommend you to use the download button with a timer this will help you to increase your average engagement time Many times you may have visited websites where you have to wait for a "few" seconds before it downloads automatically. "After seconds the download will start and the download page also shows several big display ads.

 

If you are wondering why average engagement time is important if your website's average engagement time increases then it will also help you to increase your rank in the Google search engine.

Benefits of Download Button with Countdown Timer

  • Adding a download button is very beneficial to maintain the bounce rate, which further increases the total earning of your blog.
  • This widget will help you to reduce the bounce rate which will have a positive impact on the SEO of your blog.
  • This widget also helps you to increase your earnings from the blog.
  • Increase your rank in the Google search engine.

Add Download Button with Countdown

It is very easy and simple to make a download button with a timer, in this article we have told you two ways to add a download button with a countdown timer, you can follow either of the two, all you have to do is follow the instructions given below.

Method 1.

Please edit your template in ' edit HTML ' mode. In short, please click on the theme and click edit HTML as shown below; If necessary, backup your template first to avoid editing errors.

1. Adding CSS Codes

First of all, look for the code ]]></b:skin> and paste the following code just above it.

.buttons {
margin: 10%;
text-align: center;
} .btn-hover {
width: 180px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 45px;
text-align:center;
border: none;
background-size: 300% 100%;border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}.btn-hover:focus {
outline: none;
}
.btn-hover.color-8 {
background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

If you have trouble finding a place to put the css code above you can search for the code </head> and put the css code right above the code </head> with notes must be squeezed in the code <style> --- </style>. It looks like this:

<style> 
<!-- Fill the above CSS codes --> 
</style>
</head>

Sometimes the </head> code is not found in certain templates, instead you can look for code like this:& lt; / head & gt; or  & lt;! - <head /> - & gt; & lt; / head & gt;

2. Adding JavaScript

Search for this code </body> tag on your template and paste the following code just above it.

<script type="text/javascript">
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 15;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
        } else {
            teks_waktu.innerHTML = "Sometime please wait " + waktu.toString() + " seconds.";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>
  • Number 15 in the code above is the time parameter (seconds) that the destination link is displayed for, you can change it to be faster or slower. You can also customize the display time text by changing the 'Sometime please wait','second'.

3. Adding HTML Codes

Now paste the given below in the post/page where you want to add the Download Button with Countdown Timer.

<div style='text-align: center;'>
  <button class='btn-hover color-8' onclick="generate()" id="btn"><i class='fa fa-download'></i> Download</button>
<a id="download" href="yourlink" style="display:none"></a></div> 

Method 2.

This method is much easier than the first method, all you have to do is set your link and time and is not divided into multiple steps. There is only one step. So follow the steps carefully to add a download button with a countdown timer.

Copy the following codes and paste these codes into the post/page where you want to add the Download Button with Countdown Timer.

<script type="text/javascript">
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 10;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
        } else {
            teks_waktu.innerHTML = "Sometime please wait " + waktu.toString() + " seconds.";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>
<style>
  
  .buttons {
    margin: 10%;
    text-align: center;
}

.btn-hover {
    width: 180px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 45px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;

}
.btn-hover.color-8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);

}
  
  
</style> 
  
<div style='text-align: center;'>
  <button class='btn-hover color-8' onclick="generate()" id="btn"><i class='fa fa-download'></i> Download</button>
<a id="download" href="yourlink" style="display:none"></a></div>  

Download all source code files of this Download Button with Countdown Timer by clicking the download button given above.

Now the download button with countdown timer has been added to your blog and is working properly.If you face any difficulty then please comment to us or You can watch the video, in this, we have told two ways for help. ( Watch Video )

3 comments

  1. how to open download link on new tab
    1. terget="_blank"
  2. helo sir i need your help