How to Add Popup Ad With Download Button in Blogger

If you provide a link to a downloading file on your website, then I will tell you in this article how you can install a Download Timer, that too with Popup Ad. 

You must have seen on many websites that when an image or software has to be downloaded, a popup ad opens and a timer of a few seconds is placed under the same ad. When the time is over, the link to download the file is received. 

So if you also want to put a similar Popup Ad on your Blogger website, then follow the steps given below and add this Popup Ad Script With Timer to your Blogger website.

Add Popup Ad Script in Blogger 

Step 1: First of all you have to add this CSS Code to your Blogger theme –

• First of all, you have to copy the code given below. 
• Now you have to go to the Theme section of your Blogger. 
• Before making any changes, download the backup of your theme, so that in case of any mistake, you can upload your theme again. 
• Now you have to Edit Html and find </body>. 
• Paste the copied complete code above this tag. 
• Now save the theme. 

  <b:if cond='data:view.isPost'>
        <script>
//<![CDATA[
var downloadButton = document.getElementById("button-download"); 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("get-download"); clickbtn.onclick = startDownload;
//]]>
</script>
</b:if>

Step 2: You have to paste the below code above </head>. 

  <b:if cond='data:view.isPost'>
  <style>
#button-download{display:inline-flex;display:-webkit-inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;align-items:center;-webkit-align-items:center;margin-bottom:10px;padding:9px 20px;border-radius:10px;font-size:.8rem;line-height:1.3rem;background-color:#fdd929;color:#ff2121}
.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}}
.ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}
</style>
  </b:if>

Step 3: Now you have to add the below code in that post or page where you want to place Download Popup Ad. 

In this code, you have to make some following changes. 

• Instead of xxxxx in ca-pub-xxxxxxxxxxx, you have to enter the Publisher Id of your Adsense. 
• ad-slot=”xxxxxxxxxxx” You have to enter the Slot Number of an Ad. 
• Instead of # in href=”#” you have to add the download link of the file. 
• You can also change the Download File if you want. 

<div style="text-align: center;"><b> <p style="text-align: center;"><a class="btn jt-btn-primary mb-2 me-2" href="#PopupDownload" id="get-download">Download</a></p>
<div data-ml-modal="" id="PopupDownload">
	<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="ad-pop__close" onclick="document.getElementById(&quot;PopupDownload&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;">
	<!-- ads here -->
         <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxx" data-ad-format="horizontal" data-ad-slot="xxxxxxxx" data-full-width-responsive="false" style="display: block;"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          <br />
          <a class="button" href="https://drive.google.com/uc?export=download&amp;id=1-i3QQebSBAm3Ua2cJKIlM0s6J0Z7sejz" target="blank" id="button-download">Download File</a>
		</div>
	</div>
</div> </b></div>

When you add this code to your Post or Page, your Popup Ad will be successfully applied.