Previously we posted about that how you can add a download timer countdown button on your blogger post if you haven't read can read it from here. So in this article, we will discuss how to create a popup download countdown timer with ads.
What is the Pop-up Download timer button with the ad?
When a user clicks on the Download button, a pop-up download countdown window will appear with a timer and ads. They will have to wait for a certain time to get the destination link and they have to watch the ads for this certain time to download the file.
What are the benefits of the Download countdown timer button with ads script?
There are many benefits of this HTML script some of the benefits are given below and it will help you to understand the article and download the countdown timer script more.
- You will not need to create a new page for creating a download countdown.
- This download countdown timer HTML script is fully customizable and very easy to install.
- The visitor will stay on the main article they don't need to go to another page.
- The main article bounce rate can be reduced by using this script.
- Easily customize the download waiting time and ads.
How to create a Popup Download countdown timer with the ad?
This tutorial is kinda tricky so you will need to be focused on creating this download timer button with ads. Before you follow the steps of adding a download countdown timer with ads please do a backup of your theme. If you did anything wrong then you can easily recover the theme. Now let's hit into the tutorial.
First, you will have to add CSS and Javascript to make the script work.
- Go to your blogger Dashboard and click on a theme.
- From the Customize theme drop-down menu click on Edit HTML.
- Now press on CTRL+F and find the code </b:skin>.
- Then copy the CSS code given below.
<b:if cond='data:view.isPost'> <style> #button-download{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:#fdd929;color:#ff2121} .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 .modal-overlay{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] .modal-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} </style> </b:if> - Now past it to above of </b:skin> tag.
We have completely done the CSS installation now we will add the javascript.
- To add the Java script find </body> tag.
- After that copy of the script is given below.
<b:if cond='data:view.isPost'> <script> //<![CDATA[ var downloadButton = document.getElementById("button-download"); 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> - Now paste the copied code above the </body>.
- We have done installing CSS and Javascript on the theme now press the save button and save the theme
Now the final part is to install the HTML Download timer script where you want to create a popup download countdown timer button with ads.
- Create a post/page or open an existing post/page where you want to create the download timer button.
- Open the post/page as HTML View.
- Now copy the download timer HTML script given below.
<p style="text-align: center;"><a class="button" href="main link here" id="get-download">Download</a></p> <div data-ml-modal="" id="PopupDownload"> <div class="modal-overlay"></div> <div class="modal-dialog"> <div class="modal-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;" 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;"> <!-- ads here --> <ins class="adsbygoogle" data-ad-client="ca-pub-#################" data-ad-format="horizontal" data-ad-slot="########" data-full-width-responsive="false" style="display: block;"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <br /> <a class="button" href="url_here" id="button-download">Download File</a> </div> </div> </div> - Then past the script and you are done.
0 Comments