How to Add a Responsive Popup Download Timer Button in Blogger
Hi to all, in this article I am goin to tell you all about how to add responsive popup download timer button in blogger website easily in just few minutes by using HTML, CSS and JavaScript.
So whenever some one visits your website and click on download button it will sow a popup with a countdown timer and you can add your desired timer and also you can add your AdSense code in this popup, in HTML code.
Benefits of adding this popup download timer
1. It helps increasing engagement of your website.
2. It helps to reduce your bounce rate of your webpage.
3. It will also helps to increase your ad revenue.
So, read the below provided steps carefully and completely to get clear understanding about adding popup download timer button in your blogger website easily without any error or issue.
Steps to Add Popup Download Timer Button in Blogger
Step-1: Sign-in to blogger
First of all you all need to visit official website of blogger.
And sign-in to your blogger website dashboard by using your login credentials.
Step-2: Backup your Blogger Theme
After successful login to your blogger website, make sure that you backup your blogger theme safely and to backup theme you need to follow the below path.
Blogger dashboard -> Click on theme section -> Click on arrow icon -> Select Backup theme -> Download theme.
Step-3: Visit Blogger Theme Editor
After successful backup of your theme you need to go to blogger theme editor section for that you need to follow the below path.
Blogger website dashboard -> Click n theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor section.
Step-4: Adding Code in Theme editor
First of all you need to copy below provided CSS and JavaScript code.
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
var downloadButton = document.getElementById("Popup_Download_btn"); var counter = 10; 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>
And paste the copied CSS and JavaScript code just above closing body tag or </body> tag.
Now click on save button to save the theme code.
Step-5: Adding HTML Code in Post
Now after adding the CSS and JavaScript code in your theme editor, you need to add HTML code inside post for that follow the below sub steps.
- Click on New Post or Old Post.
- Click on pencil icon
- Change Compost to HTML view
- Now add the HTML code in your desired place inside the post.
<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("PopupDownload").style.display="none""><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>
After adding the code in your desired place in post then click on publish or update button.
Step-6: Popup Button Added Successfully
After adding the above three code as per the above steps, you have successfully added responsive popup download timer button in your blogger website easily in just few minutes.
Note:
If you get any error while saving the code in your theme editor then you need to restore your backup theme and then need to repeat the same process as mentioned in above steps carefully.
If you want to change style and colors of the button, then you need to modify CSS code as above provided and if you want to change the color of the button then you need to replace the color codes in CSS and for color code you can use google color picker or any other third part website.
If you want o change the countdown timer then you need to change the value in the below JavaScript code Var Counter = 10;
In the above var condition 10 refers to 10sec, that you can change.
If the above code not working properly in your blogger template then you can add the below code, and process of adding the code is same as per the above steps.
<div class="Popup_button" id="Popup_button">Download</div>
<div class="modal" id='Popup_Back'>
<div class="Popup_bg"></div>
<div class="Popup_inner">
<div class="pop-heading">
<label class="pop__close pop_btnclose"><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></label>
<h2 style="margin: 0px;">Download Your file</h2>
</div>
<div class="pop_final_btn">
<a class="button" download href="#" id="K_download">Download File</a>
</div>
<div class="popup_ad_container">
<div class="adhtml">
<ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="xxxxxxxxxxx" data-full-width-responsive="true" style="display: block;"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<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}Popup_button{cursor:pointer}.Popup_bg{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}.at-pop{display:none}.Popup_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%}.pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}.pop__close:after,.pop__close:before{position:absolute;width:2px;height:1.5em;background:#333;display:block;transform:rotate(45deg);left:50%;margin:-3px 0 0 -1px;top:0}.pop__close:hover:after,.pop__close:hover:before{background:#aaa}.pop__close:before{transform:rotate(-45deg)}@media screen and (max-width:768px){.Popup_inner{width:90%;box-sizing:border-box}}.pop-heading{height:40px;width:100%;border-bottom:1px #e5e5e5 solid}.adhtml{margin:14px 0 4px;min-height:260px}.popup_ad_container{height:330px}#K_download{display:inline-block;height:35px;line-height:20px;width:180px;text-align:center;background-color:#005488;color:#fff;padding:8px;font-size:19px;border-radius:1px;text-decoration:none;margin-top:1px;align-items:center}.pop_final_btn{line-height:16px;margin:15px;font-size:19px;text-align:center;position:relative}.Popup_button{display:block;height:40px;color:#fff;font-size:20px;text-transform:uppercase;background:#0066e5;text-align:center;line-height:40px;width:200px;margin:auto;transition:all .4s ease-in;cursor:pointer;align-items:center}.pop-heading h2{margin:0}
</style>
<script>
//<![CDATA[
const modal= document.querySelector("#Popup_Back");const btn= document.querySelectorAll(".Popup_button");const closeModal= document.getElementsByClassName("pop_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("K_download");var counter= 30;var newElement= document.createElement("span");newElement.innerHTML= "Please Wait 30 sec";newElement.style.font= '16px';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("Popup_button");clickbtn.onclick= startDownload;
//]]>
</script>
Basically, this download button only shows in your post page only as we have kept if condition and if you want to add in your page then remove that if condition and add that code in your pages then this code works fine.
Conclusion
I hope that you have understood about adding a responsive popup download timer button in blogger website easily in just few minutes by using HTML, CSS and JavaScript.
