Popup download timer button in Blogger

In this article, I will show you how you can add an Countdown Timer button in Blogger website. So, whenever someone click on the download button, it will show a popup window with a 20 seconds of countdown timer and you can place an 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 the engagement in website and helps in SEO.

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

1. Go to 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.

Popup-Download-Timer

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

YouTube video

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

Benefits of Download Timer

  • It helps in Boost Engagement on the website
  • It helps in keeping the user longer on the webpage
  • Improve the overall ad impression and click

I hope you have successfully added a Download Timer button to your Blogger website.

Note: If this code is not working properly on your theme then you can use the alternative popup download timer code given below.

If you face any problem during the installation of the Countdown timer button, you can ask me in the comment section.

Don’t forget to join our Telegram Group and YouTube channel.

Read Also: How to Add Mailchimp SignUp Form in Blogger

One Comment

  1. MOlympiad.NET says:

    Hi. The close button does not work. How to fix it?

Leave a Reply

Your email address will not be published.