Home
Blogger

How to add Download button timer in Blogger


Hello guys! We welcome you to Shiva Technic World. Nowadays we can see many websites using the timer for downloading a file or visiting another website. So I think let's make a tutorial about that to show you how to add a download button timer in Blogger. So without wasting any time let's start.

First of all, we like to give some information about the download button timer!

How download button timer works?

It started the timer when visitors visit the article on your website and after the timer stops it will show a download button when visitors click that download button it redirects to the link. It used javascript, HTML and CSS. 

Advantages of using download button timer

By using a download button timer it will increase your earnings via your ad networks because the visitors will stay on your website till the timer ends!

How to add a download button timer in Blogger?

  • First, go to Blogger
  • Then click on the Theme option
  • Then you can see a down arrow near customize click on that
  • Then click on Edit HTML
  • Then press CTRL+F and find </head> or &lt;!--<head/>--&gt;&lt;/head&gt;
First copy this CSS and paste above </head> or &lt;!--<head/>--&gt;&lt;/head&gt;
<style>
  .stw-button {
  padding:6px 12px;
  background:orange;
  color:#f4a900;
  }</style>
Then copy this javascript and paste above </body> or &lt;!--</body>--&gt;&lt;/body&gt;
<script type='application/javascript'>
(function(){
   var message = &quot;%d seconds before download link appears&quot;;
   var count = 50; //change 50 to change timer waiting seconds
   var countdown_element = document.getElementById(&quot;stw-countdown-text&quot;);
   var download_link = document.getElementById(&quot;stw-download-btn&quot;);
   var timer = setInterval(function(){
      if (count) {
          countdown_element.innerHTML = &quot;Please wait we are generating link in %d seconds...&quot;.replace(&quot;%d&quot;, count);
          count--;
      } else {
          clearInterval(timer);
          countdown_element.style.display = &quot;none&quot;;
          download_link.style.display = &quot;&quot;;
      }
   }, 1000);
})();
</script>
Change orange color marked 50 to change seconds

Now add this code on your post or page to which you want to add a download button timer.
<center><span id="stw-countdown-text">Please wait we are generating link in 50 seconds...</span></center>
<br />
<div style="text-align: center;">
<a href="your_download_link_here" id="stw-download-btn" style="display: none;">
<button class="stw-button" titile="Download" style='color:#fff'>Download</button></a>
<noscript>Please enable javascript to Download file!</noscript>
</div>
change orange colour marked 50 with your seconds, If you want to change download text change orange colour marked Download text and change your_download_link_here text with your download link.
Watch tutorial

Last words!

Hope this article will helpful to you. If you have any doubts related to this article ask me in the comment. Thanks for visiting our site!

Have a nice day!