Download Button With Popup Ads And Countdown

हेल्लो गाइस, RDS KENDRA ONLINE में आपका स्वागत है। आज इस लेख में मैं आपको Download Button With Popup Ads And Countdown कैसे जोड़ें पर स्टेप बाय स्टेप मार्गदर्शन करने जा रहा हूं। तो, आसान स्टेप  का पालन करें और Download Button With Popup Ads And Countdown टाइमर को अपनी पोस्ट में कैसे लगा सकते हैं इसके बारे में और जानते है।

एक 'Popup Ads and Countdown or Section' जोड़ना जब भी कोई पाठक आपके दिए गए डाउनलोड बटन पर क्लिक करता है, तो उसके सामने एक पॉपअप विंडो खुल जाएगी। जिसमें आपने जितने काउंटडाउन टाइमर सेट किए हैं, यूजर को न चाहते हुए भी टाइमर खत्म होने का इंतजार करना होगा।

साथ में Ads भी दिखाई देंगे इससे आपको अच्छा फायदा होगा और आपके Ads पर अच्छा Impression होगा और आपके Blog का Bounce Rate भी काफी हद तक बढ़ जाएगा।

तो आइए जानते हैं कि आपको अपने ब्लॉग पोस्ट में Popup Ads and Countdown or Section  को  कैसे ऐड करना है।

Steps to Click With Popup Ads Countdown

Step 1. सबसे पहले ब्लॉगर डैशबोर्ड पर थीम पर क्लिक करें और फिर से HTML एडिट करें पर क्लिक करें।

Step 2. अब आपको कहीं भी क्लिक करना है और फिर CTRL+F प्रेस करना है। और इस कोड को खोजें </Head>

फिर नीचे दिए गए कोड को ऊपर </Head> टैग के ऊपर पेस्ट करें।

THIS CODE PASTE IN THEME SECTION IN ABOVE </Head>

 ---------------css---------  
 <style>  
 #at-downloadx{position: relative;display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #f3f2f2; color: #000; font-size: 15px; border-radius: 8px; text-transform: capitalize; border: 1px solid #212121!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;text-transform: uppercase; background: #f3a;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:rgba(0, 0, 0, 0.7); 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:#fff; 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>  

कोड पेस्ट करने के बाद आपको यह कोड ढूंढना होगा </body>

फिर नीचे दिए गए कोड को ऊपर </body> टैग के ऊपर पेस्ट करें।

COPY THIS CODE AND PASTE IN THEME SECTION IN ABOVE </body>

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

कोड पेस्ट करने के बाद आपको थीम को सेव करना है।

How You Can Make a Countdown Timer When the Download Button

Step 1. सबसे पहले ब्लॉगर डैशबोर्ड पर New post पर क्लिक करें और फिर से Html view पर क्लिक करें।

फिर नीचे दिए गए कोड को कॉपी और पेस्ट करें जहां आप डाउनलोड बटन रखना चाहते हैं।

THIS CODE PASTE IN YOUR POST

 <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">
			<h2 style="margin: 0px;">Download Your file</h2>
            <div class="at-pop__close" onclick="document.getElementById(&quot;AT-downloadPop&quot;).style.display=&quot;none&quot;"><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;">
   <script async="" crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8893203678473390"></script>
<!--popup-->
<ins class="adsbygoogle" data-ad-client="ca-pub-8893203678473390" data-ad-format="auto" data-ad-slot="7304074752" data-full-width-responsive="true" style="display: block;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          <br />
          <a class="button" href="#" id="at-downloadx">Download File</a>
		</div>
	</div>
</div>

उपर्युक्त लेख के अनुसार, आपको अपना AdSense ca-pub और link या एडसेंस कोड को बदलना होगा। और इन सभी कोड को इस Google Drive Link  से भी कॉपी कर सकते है। 

तो यह सब Add Download Button Click with Popup Ads and Countdown के बारे में है। मुझे आशा है कि आपको पॉपअप विज्ञापनों और उलटी गिनती के साथ क्लिक करने में कोई समस्या नहीं हुई।

अगर आपको यह आर्टिकल उपयोगी लगा हो, तो इसे शेयर करें, और हमें अपनी प्रतिक्रिया कमेंट सेक्शन में देना न भूलें। आपकी एक प्रतिक्रिया हमें और अच्छे ट्यूटोरियल लिखने के लिए प्रेरित करती है।