How to Add Download Button with Countdown Timer in Blogger

How to Add Download Button with Countdown Timer in Blogger 


Hello Friends, Welcome to AS Themes World. On today's article we are going to learn "How to Add Download Button with Countdown Timer in Blogger." Adding a Download Button with Countdown Timer is very beneficial to maintain the bounce rate as well as it also increase user engagement in a blog. This further leads to increase overall earnings of your blog.

What is Download Countdown Timer?

Many times you may have come across websites which says Download will start after "few" seconds. You have to wait for "few" number of seconds before the file you want gets automatically downloaded and the download page also shows many big display Ads.

These type of pages uses Download Countdown Timer widget because of which you have to wait to be able to download the requested file.

Benefits of Using Download Button with Countdown Timer

  • This widget will help you to reduce the bounce rate which will have a positive impact on SEO of your blog.
  • This widget also helps you to increase your earnings from the blog.

Add Download Button with Countdown Timer

There are two methods of adding Download Button with Countdown Timer. So follow the one which you like.

Method 1.

This method is divided into three steps and all the three steps are very easy. So follow the steps very carefully to add Download Button with Countdown Timer. Follow the steps carefully because if there is a slight error then the Countdown Timer Button will not work.

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.

Step 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;

Step 2. Adding JavaScript

Search for the 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 = 20;
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 = "Generating link please wait " + waktu.toString() + " seconds.";
btn.style.display = "none";
}
}, 1000);
}
//]]>
</script>

  • Number 20 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 'Generating link please wait','second'.

Step 3. Adding HTML Codes

Now paste the following codes in post/page where you want to add 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>

You May Like These -


Method 2.

This method is easier than first method and also not divided into many steps. There is just only one step. So follow the steps carefully to add Download Button with Countdown Timer.

Copy the following codes and paste these codes in post/page where you want to add 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 = 20;
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 = "Generating link 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>

Now Download Button with Countdown Timer has been added to your blog and working properly. Method 2 is easier than Method 1 because in Method 2 you can add Download Button with Countdown Timer in just one step. But in my opinion Method 1 is better than Method 2 because in method 2 you have to add long codes including CSS and JAVASCRIPT every time when you add Download Button but in Method 1 you have to add CSS AND JAVASCRIPT once and then after you can use only HTML Codes to add Download Button with Countdown Timer.

I hope you loved this article. If there are questions or sections that are not understood, let us know in the comments.


Article "How to Add Download Button with Countdown Timer in Blogger " protected

Post a Comment

Previous Post Next Post