How to Add Download Button Click with Popup Ads and Countdown

नमस्कार दोस्तों, Phamdom Official में आपका स्वागत है । आज की इस Post में मैं आपको PopUp Ads और Countdown के साथ Download Button क्लिक पर कैसे जोड़ें इसके बारे में स्टेप बाय स्टेप बात करेंगे । साथ ही आपको फ्री में इसकी स्क्रिप्ट भी प्रोवाइड करवा रहे है । तो, आसान से स्टेप्स को फॉलो करके Add Download Button Click with Popup Ads and Countdown Add कर सकेंगे तो पोस्ट में अंत तक बने रहे ।

How to click with popup ads countdown works

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

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

तो आइए जानते हैं कि आपको अपने ब्लॉग पोस्ट में click with popup ads and countdown के साथ Download Button कैसे जोड़ना है।

Steps to click with popup ads countdown

Css

सबसे पहले ब्लॉगर डैशबोर्ड पर थीम पर क्लिक करें और फिर से HTML एडिट करें पर क्लिक करें।
अब आपको कहीं भी क्लिक करना है और फिर CTRL+F प्रेस करना है। और इस कोड को खोजें </Head>
फिर नीचे दिए गए कोड को कॉपी करे और </Head> टैग के ऊपर में कॉपी किए गए कोड को पेस्ट करें।
कोड पेस्ट करने के बाद आपको थीम को सेव करना है।

<style>

.modal {display: none;position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: rgba(0,0,0, .9); transition: opacity .25s ease;z-index:999; } .at-pop__bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } .at-pop { display: none; } .at-pop__inner { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; width: 50%; margin: auto; overflow: auto; background: #fff; border-radius: 5px; padding: 1em 2em; height: 50%; } .at-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; } .at-pop__close:after, .at-pop__close:before { content: &#39;&#39;; position: absolute; width: 2px; height: 1.5em; background: #333; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; } .at-pop__close:hover:after, .at-pop__close:hover:before { background: #aaa; } .at-pop__close:before { transform: rotate(-45deg); } @media screen and (max-width: 768px) { .at-pop__inner { width: 90%; box-sizing: border-box; } } .adpop-top{height: 40px; width: 100%; border-bottom: 1px #E5E5E5 solid;} .adhtml{margin: 14px 0 4px; min-height: 260px;}.adpop-content{height: 330px;}#at-downloadx{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;}.download-pop{line-height: 16px; margin: 5px 0 5px;font-size: 14px;position: relative;} .btn-at{display: block; height: 50px; color: #fff; font-size: 24px;text-transform: uppercase; background: #f3a;text-align:center; line-height: 50px;width: 200px; margin: 150px auto; transition: all 0.4s ease-in;}.adpop-top h2{margin:0}

</style>

Js

पुन: ब्लॉगर डैशबोर्ड पर थीम पर क्लिक करें और फिर से HTML एडिट करें पर क्लिक करें।
कोड पेस्ट करने के बाद आपको यह कोड ढूंढना होगाा </body>
अब आपको कहीं भी क्लिक करना है और फिर CTRL+F प्रेस करना है। और इस कोड को खोजें </body>
फिर नीचे दिए गए कोड को कॉपी करे और </body> टैग टैग के ऊपर में कॉपी किए गए कोड को पेस्ट करें।
कोड पेस्ट करने के बाद आपको थीम को सेव करना है।

<script>

//<![CDATA[

const modal = document.querySelector("#my-modal"); const btn = document.querySelectorAll(".btn-at"); const closeModal = document.getElementsByClassName("at-btnclose")[0]; for (let i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function () { modal.style.display = "block"; }); } btn.onclick = function () { modal.style.display = "block"; }; closeModal.onclick = function () { modal.style.display = "none"; }; window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } };

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

Html

सबसे पहले ब्लॉगर डैशबोर्ड पर New post या Page पर क्लिक करें और फिर से Html view पर क्लिक करें।
फिर नीचे दिए गए कोड को कॉपी और पेस्ट करें जहां आप डाउनलोड बटन लगाना चाहते हैं।
अपने पोस्ट के अनुसार, आपको अपना AdSense ca-pub और link बदलना होगा।
फिर नीचे दिए गए कोड को कॉपी करे और </body> टैग टैग के ऊपर में कॉपी किए गए कोड को पेस्ट करें। कैसे बदलना है वो नीचे Alert Box को देखकर समझे ।
आपकी Post या Page पब्लिश करने के लिए तैयार है ।


<div class="btn-at" id="btn-at">Download</div>

<div class="modal" id='my-modal'>

  <div class="at-pop__bg"></div>

  <div class="at-pop__inner">

    <div class="adpop-top">

 <label class="at-pop__close at-btnclose"></label>

    <h2 style="margin: 0px;">Download Your file</h2>

    </div><div class="adpop-content">

	<div class="adhtml">

<ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="yyyyy" data-full-width-responsive="true" style="display: block;"></ins>

<script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>

	</div>

<div class="download-pop">

        <a class="button" href="your_download_link" id="at-downloadx">Download File</a>

  

    </div>

    </div>

     

  </div>

</div>

ऊपर दिए 👆 html Code में Highlight हो रहा xxxxxxxxxxxx की जगह आपके Adsense का Publisher I'd और yyyyy की जगह आपके द्वारा बनाएं गए Adslot की संख्या लिखनी है । और your_download_link की जगह आप जिस डाउनलोड लिंक को लगाना चाहते है उसको Replace कर देना है ।

मुझे आशा है कि आपको Click with Popup Ads and Countdown सेटअप करने में कोई समस्या नहीं हुई होगी अगर कोई समस्या है तो नीचे कमेंट कर सकते है ।

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