Join our telegram group for latest updates Join now

How to Add Download Timer in Blogger ( Download Timer Script )

There is a countdown timer before downloading anything. This is why we call a download timer. Free Countdown script for Blogger.

Blogger me Download Timer Kaise lagaye

Hi dear welcome to our SeekhloTech blog, Download Timer script-This article is about advanced download scripts for bloggers. Moreover in this article, we learn How to set up a Download countdown Timer script in Blogger.

Add Download Timer in Blog

Blogger Download Timer Boost your Earnings

This script does not work only for the countdown download button, it works for increasing AdSense earnings. By using these scripts we increase 2X Adsense Earning. This script gives more benefits to your website.

What is a Download Timer Script?

Download Timer is a simple programming language (like java, HTML, and CSS ) code that starts a countdown of 10 seconds or the time set and shows you the download link after the time end.

There is a countdown timer before downloading anything. This is why we call it a download timer. Free Countdown script for Blogger.

Download Timer Tutorial:

How to Add Download Countdown Timer in Blogspot?

⓵ First Step: Open your own website dashboard, click on pages and Create a New page With the name "download-now". Then copy the 1st code from below and paste it into the page post. Then, replace the Google Adsense Ads code at " <!--Google Adsense Code--> "in this text. If you increase the second then simply change the value of these codes to "1=10" and Then save.

New Page Code

<center> 
     <!--Google Adsense Code-->
      <br>
    <center> 
      <style>#postTitle{text-align: center;}</style>  
        <button id="download-btn" onclick="generate()">
                  <i class="fa fa-download"></i> Download Now
              </button>
              <div id="refresh" style="display: none; font-size: 18px;"><b>Thanks!</b><br> Your download will start in few seconds... <br> If not then,</div>
              <a href="" id="re-download-btn" style="display: none;">Click Here</a>
              <script>
                  function generate() {
                      var j = document.getElementById("refresh");
                      var e, n = document.getElementById("re-download-btn"),
                          t = document.getElementById("download-btn"),
                          a = document.getElementById("re-download-btn").href,
                          l = 5,
                          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),
                                  j.style.display = "contents",
                                  n.style.display = "inline") : (d.innerHTML = "<div class='waiting'>Please Wait...</div><div class='timer'>" + l.toString() + "</div> <div class='second'>Seconds</div>",
                                      t.style.display = "none")
                          }, 1e3)
                  }
              </script>
              <style>
                  button#download-btn {
                      padding: 10px 25px 10px 25px;
                      border: none;
                      border-radius: 5px;
                      color: white;
                      background: dodgerblue;
                      font-weight: 600;
                  }
                  button#download-btn:hover {
                      background: royalblue;
                  }
                  .timer {
                      background: bisque;
                      width: 5%;
                      padding: 10px;
                      font-size: 25px;
                      border-radius: 50%;
                      width: 7%;
                  }
              </style>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>  
          <script>
              document.getElementById("re-download-btn").href=localStorage.getItem("Download Link");
              document.getElementById("postTitle").innerHTML = localStorage.getItem("Post Title");
          </script>
      </center>
      <br><br>
    <!--Google Adsense Code-->
    </center>
     

⓶ Second Step: Open the theme, click on the customization and click on Edit HML, Copy CSS Code and paste it below the <head>

CSS Code

<style>    /* countdown time redirect button css */
      #redirect-download{
        padding: 10px 25px 10px 25px; 
        border: none; 
        border-radius:5px;
        color: white; 
        background: dodgerblue; 
        font-weight: 600;
      }
      #redirect-download:hover{
      background:royalblue;
      }
    </style>

⓷ Third Step: Click on the edit Html button and Paste the Javascript code before </body>

JavaScript Code

</script>

      <script>
        document.getElementById(&quot;post-Title&quot;).innerHTML = document.getElementById(&quot;postTitle&quot;).innerHTML;
    	var postTitle = document.getElementById(&quot;postTitle&quot;).innerHTML;
        function redirectbtn(){
             localStorage.setItem(&quot;Post Title&quot;, postTitle)
             localStorage.setItem(&quot;Download Link&quot;,link);
             return false;
        }
    </script>

After Paste both codes then simply save them.
You have to do this once on your website. (One-Time Process)

⓸ Fourth Step: You have to paste the below code into the HTML form of the post.

HTML Code

<center>
	<!-- Google Adsense Code-->
         <h2 style="margin: 0px;">Download<span id="post-Title"></span></h2> 
          <form action="Page Download Link" target="_blank" style="margin-bottom: 15px;">
            <button id="redirect-download" onclick="redirectbtn();"><i class="fa fa-download"></i>  Download Now</button>
          </form>
         <!-- Google Adsense Code-->
</center>
<script>
    // download link paste here
  	var link = "Download Link";
</script>

After pasting the code, you have to make some changes to it. First, Replace the Google Adsense Ads code at " <!--Google Adsense Code--> "in this text. The link to the page you created is pasted on the "page download linkinstead of "download link", you have to paste your file link.

I hope you have understood this article, if not then you can watch the video.

Getting Info...

About the Author

Hi I`m Faisal Bhutta! I am student and working online at different platform.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.