Best 5 stylish How to Add timer download script for blogger

 Hello friends! Welcome to www. howtopc.in blog. How to Add a Time Counter Button to Blogger Posts:  If you are a blogger or you have a blogger is a website, this post will be of great help to you. So guys, if you include a blogger post and link certain things to your post, I will tell you how to give that link a nice Download Button.

If you see any tool or widget related to online web development. Coding is very important in everything. People of Coding are easily earning a lot even sitting at home these days.

Download Timer in Blogger and WordPress

So even before that, In an article on this Download Timer script for blogger. But in that, I told about a script that used to get redirected as soon as the timer ended.

But today I am going to tell you about a brand new script. You will see the download button after the timer is over, after that you will download it only after clicking on it.

The script I told earlier used to work in a blogger's blog only. But you can easily use this script on the WordPress website also.

You may have noticed on many downloading sites or secure link sites that the link uses a countdown timer before it is visible, when the page loads, the few seconds timer is started automatically. Then after the time is up people see a download button to click on the link and start their download.

By giving Timer Button in the post, your post-profession will be visible .it will be very helpful for your blog as well. So let me, first of all, give you information about the benefits of using countdown timer button in the post.

benefits of Countdown Timer Button.

So guys, when you learn about the benefits of the Timer button But be sure to use the Countdown Timer Button in all your posts. The Countdown Time  Button is as follows.

  • The first advantage of this is that it will reduce the bounce rate of your blogger website.
  • If you provide a direct link to your website, any user who visits your post goes directly to download the content and does not stay on your site. If you add a few seconds to the countdown timer button, the user will pause on your site and read your post as long as you are at the same time.
  • Also, you have written the post, they read the full post. Due to which the Bounce Rate of your site remains under control

How To Add Countdown Timer Button In Blogger Post

So I will show you how to add a countdown timer button in your post.
That's why you'll need a countdown timer script to add a countdown timer button to any of your posts. You will find that script in the box below.
if you copy the script, go to your blogger dashboard and open the post in HTML View which you want to add a countdown timer.
  • Then you have to click edit HTML View of that post.
  • Then you have to paste this script at the end of the post.
  • After pasting the script, you have to come up with the link of the file you need to link in this timer and remove the https://www.mediafire.com/folder/raoleaw5fvir/Rtf 84 part and paste your file.
  • So this will set the countdown timer in your post.
  • remove the var count = 1; you can change time in the second 

How to add timer download button in HTML

1st script download timer script

<div dir="ltr" style="text-align: left;" trbidi="on">
<body>
<center>
<span id="countdown">You have to wait 1 seconds.</span></center>
<br />
<div style="text-align: center;">
<br />
<a href="https://www.mediafire.com/folder/raoleaw5fvir/Rtf 84" id="download_link" style="display: none;">

<img src="https://1.bp.blogspot.com/-K0p-fvrZ1bw/X6LDFIua_5I/AAAAAAAADsc/IV9UiAiiuwsDXnd82SPrBSJzlnpBvpMPACLcBGAsYHQ/w320-h78/107-1073795_download-button-png-file-download-free-download-button.png" /></a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 1;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>
</div>
  </body></div>


 

make countdown timer download button link appears

2nd script download timer script

  • remove the link and past your owner file link remove it https://drive.google.com/file/d/1hIzqhLXskRMnQ5EE0hGOwpO_tiyPcxTM/view?usp=sharing
  • set timer if you want change var counter = 20;, in this script default set timer 20s

<div style="text-align: center;">

<a class="button" href="https://drive.google.com/file/d/1hIzqhLXskRMnQ5EE0hGOwpO_tiyPcxTM/view?usp=sharing" id="download"><span style="font-size: large;"><b> Download</b></span></a>


<button class="himachalisonglyrics" id="btn"><span style="font-size: medium;"><b> Download </b></span></button>


<script>

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

var counter = 20;

var newElement = document.createElement("p");

newElement.innerHTML = "20 sec";

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>

</div>


 

download timer script for blogger

3rd script download timer script

  • remove the link and past your owner file link remove it https://www.howtopc.in/
  • set timer if you want change var counter = 15;, in this script default set timer 15s
<div dir="ltr" style="text-align: left;" trbidi="on">
<body>
<center>
<span id="countdown">You have to wait 15 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>Download Timer</b><br />
<a href="https://www.howtopc.in/" id="download_link" style="display: none;"><img src="https://3.bp.blogspot.com/-bqCFF_nGMv0/Wp-aBztjc7I/AAAAAAAAAVA/9eU63GcIxKk8n4N2ppAqk797hMFpwK7YQCLcBGAs/s1600/but.jpg" /></a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 15;
   var countdown_element = document.getElementById("countdown");
   var download_link = document.getElementById("download_link");
   var timer = setInterval(function(){
      // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
      if (count) {
          // display text
          countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
          // decrease counter
          count--;
      } else {
          // stop timer
          clearInterval(timer);
          // hide countdown
          countdown_element.style.display = "none";
          // show download link
          download_link.style.display = "";
      }
   }, 1000);
})();
</script>
</div>
</body></div>

4th script download timer script

This script is my favorite download timer script, That script has one spacial feature.
in this script, you can put your absence ads code
  • remove the link and past your owner file link remove it https://www.howtopc.in/
  • set timer if you want change var counter = 21;, in this script default set timer 20s
  • remove  it ca-pub-xxxxxxxxxx  and paste your AdSense publisher id and ad slot xxxxxx

that's it



<style>  
 #at-downloadx{position: relative;display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #ffffff; color: #00991f; font-size: 15px; border-radius: 9px; text-transform: capitalize; border: 1px solid #005414!important; margin-top: 1px;} .adpop-top{height: 40px; width: 100%; border-bottom: 1px #E5E5E5 solid;} .btn-at{display: block; height: 50px; color: #fff!important; font-size: 18px;border-radius: 25px; text-transform: uppercase; background: #04AA6D;text-align:center; line-height: 50px;width: 200px; margin: 12px auto; transition: all 0.4s ease-in;} [data-ml-modal] { position:fixed; top:0; bottom:0; left:0; right:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:999; width:0; height:0; opacity:0; } [data-ml-modal]:target { width:auto; height:auto; opacity:1; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; } [data-ml-modal]:target .modal-overlay { position:fixed; top:0; bottom:0; left:0; right:0; cursor:pointer; background-color:#000; background-color:rgb(247 255 160 / 21%); z-index:1; } [data-ml-modal] .modal-dialog { border-radius:6px; box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); position:relative; width: 90%; max-width:660px; max-height:70%; margin:10% auto; overflow-x:hidden; overflow-y:auto; z-index:2; } [data-ml-modal] .modal-content {background:#ffffffcf; padding:23px 27px;} @media (max-width:767px) { [data-ml-modal] .modal-dialog {margin:20% auto;} }  
  .at-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }  
 </style>



 <p><a class="btn-at" href="#AT-downloadPop" id="btn-at">Download</a></p>  
 <div data-ml-modal="" id="AT-downloadPop">  
      <div class="modal-overlay"></div>  
      <div class="modal-dialog">  
           <div class="modal-content center">  
      <div class="adpop-top">  
                <h3 style="margin: 0px;"><span style="color: red;">Click on Download Button After Time is Over</span></h3>  
       <div class="at-pop__close" onclick="document.getElementById("AT-downloadPop").style.display="none""><svg style="height: 25px; width: 25px;" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>  
      </div>  
      <br />  
      <div style="width: 660px;">  
      <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxx" data-ad-format="auto" data-ad-slot="xxxxxxx" data-full-width-responsive="true" style="display: block;"></ins><script>  
    (adsbygoogle = window.adsbygoogle || []).push({});  
 </script></div>  
      <br />  
      <a class="button" href="https://www.howtopc.in/" id="at-downloadx" target="_blank">Download File</a>  
           </div>  
      </div>  
 </div>



<script>  
 //<![CDATA[  
 var downloadButton = document.getElementById("at-downloadx"); var counter = 21; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 21 sec"; 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 = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1500); }; var clickbtn = document.getElementById("btn-at"); clickbtn.onclick = startDownload;  
 //]]>  
 </script>


5th script download timer script

  • put your adsence code 
  • put your download link
<br />
Enter Adsense code here
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<script>
   var count = 15; // Number of remaining seconds.
   var counter; // Handle for the countdown event.
   
   function start() {
    counter = setInterval(timer, 1000);
   }


   function timer() {
    // Show the number of remaining seconds on the web page.
    var output = document.getElementById("displaySeconds");
    output.innerHTML = count;
    
    // Decrease the remaining number of seconds by one.
    count--;
    
    // Check if the counter has reached zero.
    if (count < 0) { // If the counter has reached zero...
     // Stop the counter.
     clearInterval(counter);
     
     // Start the download.
     window.location.href = "Enter your download link here";
     return;
    }
   }  
   // Start the countdown timer when the page loads. 
   window.addEventListener("load", start, false);
  </script>


<br /><b>
<h2>Your download will begin in <span id="displaySeconds">15</span> seconds.</h2><br />
<br />
Enter Adsense code here
<br /><br /></b></div>
LookClosedComment
Cancel