|
Maybe most of the readers of this article already know what a Timer Pop up Download Button is, but as a reminder, it will be explained again here. Timer Pop up download button is a button on a website or blog that is used to stay audience before the user goes to the destination link. In this article we will discuss how to create a timed pop up download button on Blogger.
Pop Up Download Button With Ad and Countdown Scenarios and Benefits
The way it works is almost the same as other timer download button except that the Timer pop up download button remains. The scenario is when a visitor wants to download a certain file on a blog, they will be wait to a certain timer from the blog before finally heading to the file download link.
There are many benefits that can be obtained from this version of timer popup download button, some of which are:
- No need to create a new page
- Easier to add button & customize
- Stay on the main article
- Reduce the bounce rate of the main article
- After you add this button in your post, or on your blogger page and click on the button, a pop up will appear, and it will contain the specified time. If the time is up, the download button will appear and you can click it.
Timer Pop Up Download Button Tutorial On Main Blog
This tutorial will be in part, First we will edit the source or blog code. We use blogger because this tutorial is also preferred for blogger users, other service users can adapt to this tutorial.
Adding Some CSS and Javascript Code
It should be noted that this part will be a little complicated, so look carefully because if there is even a slight error then the timer pop download button will not work
First of all, Please edit your template in ' edit HTML ' mode. In short, please click on the theme and click on edit html as shown in the image below; If you need to backup your template first to avoid editing mistakes.
|
Adding CSS code
This CSS code serves to display the layout on the article to show timer pop up button.
In Blogger the CSS code is marked with the <b:skin>...</b:skin> tag . If you have difficulty placing the CSS code above, you can find the </head> code and place the CSS code just above the </head> code , with a note that you must use the <style>...</style> code . The result is something like this:
<style>
<!--[ Fill in the CSS Code above ]-->
</style>
</head>
Sometimes the </head> code is not found in certain templates , instead you can look for code like this: </head> or <!--<head/>--></head>
<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>
Javascript Code to Encode Url
The easiest way to place javascript code is to place it before the </body> tag . Look for the tag usually at the bottom of the template and paste the Javascript code below right before the </body> tag.
<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>
Change the section that has been marked in the code above with the url of your timer pop up download button
If you have added it, please click Save Theme in your template.
If you have, please create a new post or page
Select HTML view mode and then copy the code below and place it on the post or page where you want to add timer pop up download button
<p style="text-align: center;"><a class="button" href="#PopupDownload" 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>
Change the section that has been marked in the code above with the url of your timer pop up download button
Up here your timer pop up download button has been completely created, if you follow all the steps correctly then we can guarantee the timer pop up download button is working well. Please try it by clicking the download link on your blog. If there are questions or parts that are not understood, please write questions through the comments column provided.