How to Create Fully Automatic Download Button With Countdown timer

अगर आप फुल्ली ऑटोमैटिक Download बटन बनाना चाहते हो व भी timer के साथ तो हम आपकी सहायता कर सकते है। क्योकि आपको इस प्रकार का article वैबसाइट पर कहीं भी नहीं मिलेगा जिसमे आपको ऑटो download button व भी टाइम के साथ मिल जाये ना ही आपको इस प्रकार की यूट्यूब पर विडियो मिलने वाली है हमारे अलावा

Download code click here

Get Code

यह भी देखे:- Disable Copy Paste content from web page using CSS on blogger | Google Blogger Website (ब्लॉगर वैबसाइट से content को कॉपी होने से रोके)

विडियो को देखे 

Step 1. सबसे पहले आपको एक नया पेज बनाना है। 

  • उस पेज मे आपको इस दिये गए कोड़ को पेस्ट कर देना है
  • इसमे आप download बटन के साथ ads उपर और नीचे दोनों स्थान पर लगा सकते हो।
<center> 
 <!-- paste ads code here-->
  <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,</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 = 20,
                      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>
  <!-- paste ads code here-->
</center>

Step 2. नीचे दिये गए css कोड को आपको अपनी वैबसाइट के html section के head tag के नीचे पेस्ट कर देना है।

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

Step 3. नीचे दिये गए java script कोड को आपको अपनी वैबसाइट के html section के सबसे लास्ट में जहां body एंड होता है उस tag के ऊपर इस कोड पेस्ट कर देना है।

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

Step 4. अब आपको अपनी वैबसाइट को खोलना है और किसी पोस्ट को खोल लेना है उसके बाद  इस्पेक्ट करना है।

  1. अब आपको अपने पोस्ट टाइटल tag के class या id को कॉपी करना है अगर आपसे ये नहीं हो पाता है तो आप comment कर मुझे 7014152548 पर आपकी वैबसाइट को Whatsapp करे मे आपकी हेल्प करूंगा 
  2. उसके बाद आपको आपने html code को edit करना है उसके बाद आपको जो आपने कॉपी किया उसे find करना है और h1 tag में id="postTitle" को paste कर देना है।

Step 5. इसके बाद जब भी आप एक पोस्ट बनाते हो जिसमे आपको Download बटन देना होता है 

  • उस पोस्ट मे इसे कोड़ को जरूर डाले तथा अगर आप इसके उपर नीचे ads कॉड भी लगा सकते हो
  • download link paste here की नीचे var link = "#" में # की जगह आपको जिसको download करवाना है उसका लिंक डाल देना है। 
  • form section के action="#"  में # के स्थान पर आपको उस पेज का लिंक डालना है जो आपने बनाया है।

<center>
<!-- paste ads code here-->
         <h2 style="margin: 0px;">Download करे <span id="post-Title"></span></h2> 
          <form action="#" target="_blank" style="margin-bottom: 15px;">
            <button id="redirect-download" onclick="redirectbtn();"><i class="fa fa-download"></i>  Download Now</button>
          </form>
         <!-- paste ads code here-->
</center>
<script>
    // download link paste here
  var link = "#";
</script>

example के लिए आप कोड Download करके देखे

Download Now

1 Comments

Post a Comment

Previous Post Next Post