How to Add countdown timer Download Button In Blogger Post - [Blogger Cutdown Timer Button With Ads]
![Add countdown timer Download Button In Blogger Post - [Blogger Cutdown Timer Button With Ads]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj00v5NDRk-N8-IWllN-D5_sOo45sSu3iU0qCwWMVXZUisubbU9pZLoc5BalE9qTtgkHXEHyQnMQT5FzxKBWPNlZtwAD_BIH3147LyuS1ILMTben2TFa3Y2_xc3aJEMgy6y6RDEiCS2Cwg/s1280/maxresdefault+%25281%2529.jpg "Add countdown timer Download Button In Blogger Post - [Blogger Cutdown Timer Button With Ads]")
How to Add countdown timer Download Button HTML Code for the website. Get Countdown timer button HTML and JavaScript Code a website to make download Link appears after a countdown. There is no Plugin for the blogger website to do these tasks but with the utilization of diminutive JavaScript code. we can facilely make a countdown timer download button on any blogger website.
There is not only one benefit of this download button. If your website is AdSense approved. So you will visually perceive double benefit because this popup download can put two ads.
Step 1 :
- Theme > Edit HTML
- Now Press CTR+R And Find <Head> and paste below code just before of this 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; } .tg-pop__bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } .tg-pop { display: none; } .tg-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%; } .tg-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; } .tg-pop__close:after, .tg-pop__close:before { content: ''; position: absolute; width: 2px; height: 1.5em; background: #333; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; } .tg-pop__close:hover:after, .tg-pop__close:hover:before { background: #aaa; } .tg-pop__close:before { transform: rotate(-45deg); } @media screen and (max-width: 768px) { .tg-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;} #tg-downloadx{display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #005af0; color: #fff; font-size: 15px; border-radius: 8px; text-transform: capitalize; border: 1px solid #212121!important; margin-top: 1px;} .download-pop{line-height: 16px; margin: 5px 0 5px;font-size: 14px;position: relative;} .btn-at{display: block; height: 50px; color: #fff; font-size: 24px;text-transform: uppercase; background: #005af0;text-align:center; line-height: 50px;width: 200px; margin: 150px auto; transition: all 0.4s ease-in;} .adpop-top h2{margin:0} </style>(code-box)
- Now, Search </body> tag and paste below code just before of this tag.
<script> //<![CDATA[ const modal = document.querySelector("#my-modal"); const btn = document.querySelectorAll(".btn-at"); const closeModal = document.getElementsByClassName("tg-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("tg-downloadx"); 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("btn-at"); clickbtn.onclick = startDownload; //]]> </script>(code-box)
Now Save Theme.
Step 3:
Now Open Blogger Dashboard And Go Your Target Post where you want to add Cutdown Download Button And Past the Code.
Code:
<div class="btn-at" id="btn-at">Download</div> <div class="modal" id='my-modal'> <div class="tg-pop__bg"></div> <div class="tg-pop__inner"> <div class="adpop-top"> <label class="tg-pop__close tg-btnclose"></label> <h2 style="margin: 0px;">Download Your file</h2> </div><div class="adpop-content"> <div class="adhtml"> Ad Code </div> <div class="download-pop"> <a class="button" href="#" id="tg-downloadx">Download File</a> </div> <div class="adhtml"> Ad Code </div> </div> </div> </div>(code-box)
Now, # Here to Your Download Link And ADCode Here past Your Ads Codde.
