How to Add Download Button In Blogger - 3 Scripts

How to add a countdown timer download button for HTML code site. 

It is utilized on our technical website for RP. A lot of people who visit my website want to know how the timer is set up before the download link appears. As a result, I'll talk about three cutting-edge scripts that we use on our website in this post.

You should read some things, like the benefits and drawbacks, before adding a download with a computer button to the Blogger site.

Why add a download button with a timer on Blogger or any other website?

This kind of script is used on our website as well as numerous sites where you can download games, mode apps, and software. Wait a few minutes after clicking the guest download button before the download link appears and begins. What's the point of doing this on your blog? Ads can be placed above and below the timer and download button. The best feature of this script is that you can post messages before the download link appears. Click no further on your advertisement.

However, you can use it with URL shorteners on websites or anywhere else. Therefore, if you want to include a countdown timer on the download page before the download button appears. Then simply follow the steps listed below.

The benefit of using the Download Timer button on the site

At the point when guests stay on your webpage longer, your site's visit rate will diminish which is the most useful for your site. Anybody can put various advertisements beneath or more the download button and get more snaps. Therefore, you ought to give this script a shot if you are having issues with a high bounce rate.

WordPress has a lot of plugins, but PHP, custom websites, and Blogger do not have this functionality. Therefore, download a countdown timer from the download button at the bottom using one of the three best scripts.

Let's get started: Using JavaScript and HTML, there are three ways to make a timer download button. In this post, I'll show you how to design one for your website in each of these three scenarios. Pick one to use. All three are available.

Script / Method-1

Add a countdown timer to download the button with JavaScript.

Here are the steps to use it in your Blogger template:

1. Go to the Blogger Dashboard
2. Navigate to a post and create a new one
3. Convert from Composer Preview to HTML View.
4. Download the full code for all the modes in the download section below.
5. Just paste all the code in the first step and change the URL here into your download link.
6. That's it - simple JavaScript. If you know how to deal with CSS, you can configure it.

Copy the script by double-clicking on the following code:

  <div dir=”ltr” style=”text-align: left;” trbidi=”on”>
  <br />
  <span style=”font-size: x-large;”><br /></span>
  <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 = “URL Here”;
  return;
  }
  }
  // Start the countdown timer when the page loads.
  window.addEventListener(“load”, start, false);
  </script>
  
  <br />
  <span style=”font-size: x-large;”>You Will Be Redirected To Download Link In <b><span id=”displaySeconds”>15</span></b> Seconds.</span><br />
  
  AdSense Code Here
  
  <br />
  <span style=”font-size: large;”><a href=”URL Here”>Click Here To Get The Download Link If Not Redirected.</a></span></div>
  </div>
  

If you don't like the first method or like more advanced then, follow the second method, a more up-to-date temporary download link using javascript, html and css.

Script / Second Method

Utilizing the JavaScript button for the download link, add an automatic countdown timer.

It contains two identical texts with minor alterations to one another.

The first script to use for an automatic countdown timer when the page loads works when the user clicks the download button and waits for the download link to appear.

Steps to get used to your blogger template:

1. Go to Blogger Dashboard.
2. Go to a job and create a new job
3. Convert from Composer Preview to HTML View.
4. Download the complete code for all the methods in the download section below.
5. Just paste all code 1 and change the download link to your download link.
6. That's it - simple JavaScript, if you know how to play with CSS, you can change it.

Double click on the icon below and select it again:

  <center>
  <span id=”countdown”>You have to wait 15 seconds.</span></center>
  
  <div style=”text-align: center;”>
  <b>Download Timer</b>
  
  <a href=”Download Link” id=”download_link” style=”display: none;”><img border=”0″ data-original-height=”91″ data-original-width=”500″ height=”51″ img=”” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgZwzk21ODm8OanbLSAA2ZZYVWhHTyx_v1ePwJxLQjkdqHpFUMiTTBi_uN_0BcDVvW5sD3L3cr0ZZv7uG2J_fZY9tLQhZXTY22sF0c8caqxUX8AjillIzxTTy7BoL9mp8Jt0GGWbnyUKQx/s200/Download-Buttons-transparent-PNG-images-715×715.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 = 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>
  

Now that users click the download button and wait for the download link, the second program works. After downloading, the button appears, and the user can download it.

How to make a contemporary download button that has a countdown timer.

1. The Big Blogger Dashboard.

2. Go to the Themes / Templates section.

3. Click Edit HTML.

4. Now </head> find and paste CSS style underneath </head> or style CSS code for bottom []> </b>: skin> and back.

Style tags enter the following code:

  <style>
  
  /* Download Button Timer CSS */
  .buttonDownload{display:inline-block;position:relative;padding:10px 25px;background-color:#4cc713;color:#fff;font-family:sans-serif;text-decoration:none;font-size:.9em;text-align:center;text-indent:15px}.buttonDownload:hover{background-color:#333;color:#fff}.buttonDownload:after,.buttonDownload:before{content:’ ‘;display:block;position:absolute;left:15px;top:52%}.buttonDownload:before{width:10px;height:2px;border-style:solid;border-width:0 2px 2px}.buttonDownload:after{width:0;height:0;margin-left:3px;margin-top:-7px;border-style:solid;border-width:4px 4px 0 4px;border-color:transparent;border-top-color:inherit;animation:downloadArrow 2s linear infinite;animation-play-state:paused}.buttonDownload:hover:before{border-color:#4cc713}.buttonDownload:hover:after{border-top-color:#4cc713;animation-play-state:running}@keyframes downloadArrow{0%{margin-top:-7px;opacity:1}0.001%{margin-top:-15px;opacity:0}50%{opacity:1}100%{margin-top:0;opacity:0}}
  </style>
  
  

5. Now Find & Past Below SCRIPT Code before </body>

Again Select below code by double click and copy it:

  <script type=”application/javascript”>
  function downloadStart(){
  var message = “%d seconds before download link appears”;
  // seconds before download link becomes visible
  var count = 5;
  var countdown_element = document.getElementById(“countdown”);
  var download_link = document.getElementById(“download_link”);
  var download_start = document.getElementById(“downloadStart”);
  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.style.display = “initial”;
  countdown_element.innerHTML = “You have to wait %d seconds.”.replace(“%d”, count);
  download_start.style.display = “none”;
  // decrease counter
  count–;
  } else {
  // stop timer
  clearInterval(timer);
  // hide countdown
  countdown_element.style.display = “none”;
  // show download link
  download_link.style.display = “”;
  }
  }, 1000);
  };
  </script>
  

6. Save Template and Open Post or Create a new post to check to work on the script.

7. Place in your Post/Article where you need to use this download button  HTML for Download Button

  <div class="downloadButtonByTechnicalArp" style="text-align: center;">
  <br />
  Place your ADSENSE CODE - 1
  <br>
  
    <span id="countdown" style="display:none;">You have to wait 15 seconds.</span>
  <br />
  <div style="text-align: center;">
    <a onClick="downloadStart()" id="downloadStart" class="buttonDownload" >Download</a><br />
    <a href="your link" id="download_link" class="buttonDownload"  style="display: none;">Download Now</a>
    <noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
  </div>
  <br />
  ADSENSE CODE - 1
  <br>
  </div>
  

That is, use one of the scripts above. Now let me share your interesting and responsive design with Bootstrap.

Scenario 3 / Method 3

With a countdown timer and responsive download button, the button download timer: Designed for Bootstrap: Utilized from our site. Note: In order to modify your website using this script, you must be familiar with some CSS.

Steps to use this script:

The second method describes the same stages for each stage.

Simply utilize the code below.

That's it. Use one of the scripts above. Presently Let me share my own Appealing and Responsive Plan utilizing Bootstrap.

Third Method/Script 3

Responsive and Attractive Countdown Timer Download Button

Download Button with Timer: Bootstrap Designed: Used by Our website. NOTE: If you want to Use this Script then you must know some CSS to make changes according to your website.

Steps to Use this Script:

1. All Steps are the same as mentioned in the second method.
2. Just Use the below Code and use it.

  <style>
  /* Download Button Timer CSS */
  #containerId{background:#37b8ef;}
  .textCenter{}
  .textTopic{color:#000; margin:1%;}
  .textSize{font-size:14 px; color:#000;}
  #arpianDownloadButton,#arpianDownloadButtonLink{padding:10px 20px;border:0;border-radius:5px;background:#fff;color:#000;float:right;text-transform:capitalize;font-weight:700;}
  </style>
  

Now Place below code in your Post/Article where you need to use this download button */

  <div class=”container-fluid” id=”containerId”>
  <div class=”container” style=”margin:1%;”>
  
  <div class=”textCenter”>
  <P class=”textTopic” align=”center”><b>TITLE/Heading comes Here </b></P>
  <div>
  <span class=”textSize”><b>Click here 👇 to Download </b></span>
  <button id=”arpianDownloadButton” onclick=”generate()”><i aria-hidden=”true” class=”fa fa-cloud-download”></i> download</button>
  <a href=”#DOWNLOADLINK” id=”arpianDownloadButtonLink” style=”display: none;”><i aria-hidden=”true” class=”fa fa-cloud-download”></i> Re-download</a>
  </div>
  </div>
  
  <!– Banner ads for download –>
  <br />
  <!–ADSENSE Code 1 for Banner Size–>
  </div>
  
  <div class=”table”>
  <table class=”table table-bordered ” style=”background:#f7f7f7″>
  <tbody>
  <tr align=”center”>
  <td>If it’s not downloaded automatically, Please Try Again & Click to Re-Download. And If Again not able to Downlaod Please Inform via the Contact Form page of this blog.
  </td>
  </tr>
  </tbody>
  </table>
  </div>
  </div>
  

<!--Script to Make Download Button with Timer-->

  <script type=’text/javascript’>
  //<![CDATA[ Load Time for Download
  function generate(){
  var e,n=document.getElementById(“arpianDownloadButtonLink”),
  t=document.getElementById(“arpianDownloadButton”),
  a=document.getElementById(“arpianDownloadButtonLink”).href,
  //Time in seconds
  l=40,
  d=document.createElement(“span”);n.parentNode.replaceChild(d,n),
  e=setInterval(function(){–l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display=”inline”):(d.innerHTML=”<i class=’fa fa-clock-o’ aria-hidden=’true’/> This file is preparing to download please wait. “+l.toString()+” Seconds….”,t.style.display=”none”)},1e3)}
  
  //]]>
  </script>
  

Thanks here our aritcle end if you have any query please comment below: