Table of Contents

How To Add Popup Download Button With Ads In Blogger In Hindi

आपने कई Websites पर इस तरह का Popup Download Button देखा होगा, जब भी हम किसी download link पर Click करते हैं तो एक Popup Timer के साथ Open होता है और ऐसा ज्यादातर हमें Images Download की WEBSITES में दिखता है ।

तो आज इस Post में हम जानेंगे कि How To Add Download Button Click With Popup Ads In Blogger?

Advance Timer Script के फायदे

यदि आप अपने Blog में इस तरह की Script ऐड करते हैं तो Visitor आपके Blog पर ज्यादा Time तक रुकेगा जिससे आपके Blog का वेटिंग Time बढ़ेगा और साथ ही आपकी Adsense Earning भी ज्यादा होगी क्योंकि इससे Ads पर Click आने के ज्यादा Chances होते हैं ।

How To Add Download Button Click With Popup Ads In Blogger

इस तरह के Download Buttons को लगाना बहुत ही आसान है । इसमें आपको कुछ Simple से Steps Follow करने होते हैं जिनके बाद आपकी Website में भी ये डाउनलोड Button पर Click करते ही Popup Ads Window Open होगी वो भी Timer के साथ ।

इससे आपके Blog की Income भी बढ़ेगी तो चलिए जानते हैं कैसे Add करना है ?

Step 1. सबसे पहले नीचे दिए Codes को Copy कर लें और फिर अपने Blogger के Dashboard को Open करें और Theme>>Edit HTML में जाएं ।

<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>{codeBox}

Step 2. Edit HTML में जाने के बाद Ctrl+F दबाकर या Search Bar में </head> Search करें और </head> के Just ऊपर इन Codes को Paste कर दें

Step. 3. अब फिर से नीचे दिए codes को copy करें और Edit HTML में जाकर </body> Search करें ये आपको Theme के सबसे नीचे मिलेगा । इसके Just ऊपर Copy किये Codes को Paste कर दें ।

<script>  
 //<![CDATA[  
 var downloadButton = document.getElementById("at-downloadx"); var counter = 40; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 40 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>{codeBox}

Step.4. अब नीचे दिए Codes को Copy करें और जिस Post में ये Download Button लगाना चाहते हैं उसे Open करें और इसे HTML View में बदलें ।

<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 Please Wait 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: 460px;">  
      <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5394955726848487"
     data-ad-slot="5727095169"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script> 
    (adsbygoogle = window.adsbygoogle || []).push({});  
 </script></div>  
      <br />  
      <a class="button" href="#" id="at-downloadx" target="_blank">Download File</a>  
           </div>  
      </div>  
 </div>{codeBox}

Step 5. अब Post में जिस जगह Popup Download Button लगाना है वहाँ Copy किये गए Codes को Paste कर देना हैं ।

Last वाले Codes में # की जगह आपको आपकी File का Download Link Add करना है

इसके बाद आपकी Post में Popup Download Button With Ads and Countdown लग जायेगा ।

अब Post View करें आपको Download Button दिख जाएगा । जिस पर Click करते ही एक Popup Open होगी जिसमें Advertise के साथ Download Button दिखेगा ।

Conclusion

मैं उम्मीद करता हूँ कि आपने इस Post को पढ़कर अपने Blog में Download Button With Ads and Countdown लगा लिया होगा । इसके Simple से Steps हैं ।

आपको सबसे पहले वाला Code Copy करके Blog Theme में </head> के ऊपर Paste करना है
दूसरा Code Blog Theme में </body> के ऊपर और
तीसरा Code Post में जहां Button Add करना है उसमें Paste करना है ।

तो इस तरह से Download Button With Popup Ads से अपने Blog का Waiting Time बढ़ा सकते हैं । ये Script Add करने में आपको किसी तरह की Problem आती है तो मुझे comment करके जरूर बताएं ।

मैं उम्मीद करता हूँ आपको ये पोस्ट How To Add Popup Download Button With Ads And Countdown जरूर पसन्द आई होगी । इसे अपने Blogger दोस्तों के साथ भी जरूर Share करें ।