If you want to do guest posting click here. Guest Post!

How to Add Download Button Click with Popup Ads and Countdown

How to Add Download Button Click with Popup Ads and Countdown

Hello guys, welcome to The Kathait. Today in this article I'm going to guide you step by step on How to Add Download Button Click with Popup Ads and Countdown. So, follow the easy steps and learn more about how you can make a countdown timer when the download button link appears.

Adding a 'Popup Ads and Countdown or section' Whenever a reader clicks on your given download button, a popup window will open in front of him. In which the number of countdown timers you have set, the user will have to wait for the timer to end even if he does not want to.


And along with Ads will also appear, this will benefit you well and will have a good effect on your ads and the bounce rate of your blog will also increase to a great extent.

So let's know how you have to put click with popup ads and countdown in your blog post.

Steps to click with popup ads countdown

Step 1. First of all, on Blogger Dashboard, click the theme and click again Edit HTML.

Step 2. Now you have to click anywhere and then press CTRL+F. and find this code </Head>

Then copy and paste the code given below into the </Head> tag above.
<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>

After pasting the code you will need to find this code </body>

Then copy and paste the code given below into the </body> tag above.

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

After pasting the code you have to save the theme.

Take care not to tamper with the given code and copy-paste it carefully.

How you can make a countdown timer when the download button

Step 1. First of all, on Blogger Dashboard, click the New post and click again Html view.

Then copy and paste the code given below into where you want to place the download button.
<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="8671274899" data-full-width-responsive="true" style="display: block;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
	</div>
<div class="download-pop">
        <a class="button" href="#" id="at-downloadx">Download File</a>
  
    </div>
    </div>
     
  </div>
</div>
According to the above-mentioned article, you must change your AdSense ca-pub and link.

If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.



So this is all about Add Download Button Click with Popup Ads and Countdown. I hope you didn't have any problem click with popup ads and countdown.

If you found this article useful, do share it, and don't forget to give us your feedback in the comments section. Your one feedback inspires us to write more good tutorials

एक टिप्पणी भेजें