Add Popup Click Download Button with Timer Countdown and Ads on Blogger
Admin
Update:
... menit baca
Dengarkan
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 Blogger
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.
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.
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>
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
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.
Post a Comment