How To Add A Popup Download Timer Button In Blogger

In this article, I will show you how you can add a Countdown Timer button to the Blogger website. So, whenever someone clicks on the download button, it will show a popup window with 20 seconds of a countdown timer and you can place AdSense ads on it.

So, in this way, you can keep your visitors longer on your Blog post and reduce your Bounce rate and increase the overall dwell time. So, it helps increase engagement in the website and helps in SEO.

To Add a Popup download Timer Button in Blogger, follow the below steps.

1. Go to the Blogger dashboard and Open a Blog post.

2. Now paste the HTML code and replace the Download button link, Adsense Publisher id, and ad slot code on it.

<p style="text-align: center;"><a class="button" href="#PopupDownload" id="get-download"><i class='icon download'></i>Download</a></p>
<div data-ml-modal="" id="PopupDownload">
	<div class="Popup_container"></div>
	<div class="modal-dialog">
		<div class="Popup_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; fill: black;" 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;">
	<!--Change data adslot & Adclient code here-->
         <ins class="adsbygoogle"
 style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxx"
 data-ad-slot="xxxxxxxxxxx"
     data-ad-format="auto"
 data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          <br />
          <a class="button" href="#" id="Popup_Download_btn"><i class="icon download"></i>Download File</a>
</div></div></div>

3. Then copy the CSS & Javascript code and paste it above the </body> tag.

   <b:if cond='data:view.isPost'>
        <script>
//<![CDATA[
var downloadButton = document.getElementById("Popup_Download_btn"); 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>

<b:if cond='data:view.isPost'>
  <style>
#Popup_Download_btn{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:#303e9f;color:#ffffff; font-weight: bold;}
.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 .Popup_container{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] .Popup_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}
.icon {display: inline-block;vertical-align: middle;margin-right: 10px;width: 18px;height: 18px;background-size: cover;background-repeat: no-repeat;background-position: center center;}
.button .icon.download {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>");
}
</style>
  </b:if>

4. Now your Popup download Timer button will work on the Blogger website.

This download popup is fully responsive and works well on all types of devices.

Here, note that this timer button code will only load on the Post page only as we have set the if condition only. if you want to use it on pages then you can remove it from your code.

If you don’t know how the if condition works in Blogger then you can refer to this article.

If you want to change the countdown timer time then you can change the value in the Javascript code. Find this code on JS. [ var counter = 20; ]

Here, the 20 value refers to 20sec, you can change the value according to your need.

Benefits of Download Timer