How To Add A Popup Countdown Timer Download Button In Blogger
Team TeachWiki
The download clock button in blogger was intended to assist you with better understand to your blog visitors by providing you with a simple to utilize tool that assists you with reaching the place where they are prepared to purchase.
These days, one of the main things for your blog is to ensure that every one of your guests will make a buy after they've read all the article on your blog. Therefore, it's advised that you add a download clock button or download counter to make it simple for your guests to make their next stride.
In this very short post i am going to show you how to add this advanced download timer button in your blog post. So, friends let's start.
Table of Contents
How do I add a countdown timer to my Blog Post?
- Go to Blogger.com
- Open theme tab > Edit html
- Type Ctrl + f to search </body> tag
- Paste given code before </body> tag
<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 = 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("btn-at");
clickbtn.onclick = startDownload;
//]]>
</script>Now copy this css file and paste this before closing head tag
<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 svg{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}.at-pop__close:after,.at-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}.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}.download-pop{line-height:16px;margin:15px;font-size:19px;text-align:center;position:relative}.adpop-top h2{margin:0}#at-downloadx,#btn-at{float:left;font-size:15px;font-weight:500;text-align:center;clear:both;-webkit-box-sizing:border-box;box-sizing:border-box}#at-downloadx,#btn-at{width:100%;margin:30px 0 10px}#at-downloadx .load-more,#btn-at .load-more{margin-right:.5rem;background-color:#01875f;color:#fff;border:none;border-radius:.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:2.25rem;min-width:5.5rem;outline:0;padding:7px 15px;position:relative;-webkit-transition:background .4s cubic-bezier(.25, .8, .25, 1);-o-transition:background .4s cubic-bezier(.25, .8, .25, 1);transition:background .4s cubic-bezier(.25, .8, .25, 1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-align:center;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#at-downloadx .load-more svg,#btn-at .load-more svg{fill:currentColor;margin-right:10px}#at-downloadx #load-more-link:hover,#btn-at #load-more-link:hover{background-color:#035b41;color:#fff}</style>
Now friends save your theme and open any post where you want to add this download timer button just copy given code and place this in middle of post
<div class="btn-at" id="btn-at">
<a class="load-more" id="load-more-link">
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" /></svg>
Download
</a>
</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"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg></label>
<h2 style="margin: 0px;">Download Your file</h2>
<script async="" crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-"></script>
<ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="" data-full-width-responsive="true" style="display: block;"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="download-pop">
<div class="blog_pager container" id="at-downloadx">
<a class="load-more" href="https://computingmode.blogspot.com/" id="load-more-link">
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" /></svg>
Download
</a>
</div>
</div></div>
</div>After placing the code save your post.
Purpose of Download Timer Button in Blog Post?
The Purpose behind download time is to inform a client a download is occurring. It utilizes a clock set to a particular measure of time. This permits the client to know that the download is occurring, and how long is left until it's done.
Advantages of Download Timer Button in blog post?
- The principal advantage of the Download Button is that it assists track your traffic and it with canning monitor who is clicking your connection and in particular, it is an extraordinary method for helping endorsers.
- Download Timer button help's you to Increase your Impression on AdSense to increase income.
- You have likewise expanded the Engagement Time of your Website when you put Download Timer Button on your site.
I hope after reading this post you are able to add download timer button in to your blog post but if you are still facing problem do not worry i have an idea for you watch this video tutorial.
If you are new and do not know even the abc about blogging you can join our full blogging course.
Comments