How To Add Download Wait Countdown On Blogger
How To Add Download Wait Countdown Page in WordPress | Welcome Hello friends, today’s Fresh Video Yo article will teach you in today how you can add weighting countdowns to your WordPress website, like if the user clicks on the download button, the new page will open its Your waiting page will be inside, so to see all of this, watch the video above and code it below.
NOTE: TO UNDERSTAND THIS TUTORIAL, YOU NEED TO WATCH THE VIDEO ABOVE, WITHOUT SEEING THE VIDEO, YOU WILL NOT UNDERSTAND ALL THESE CODE VERY WELL, FIRST OF ALL WATCH THE VIDEO THEN COPY ALL THE CODE LATER.
Steps Add Download Wait Countdown On Blogger:
- Go to Editor
- Footor.php
- paste the below code
- Save It
- Add any link with id= download. id= download Links waits for 30 sec or predefined time.
i.e
<a id=”download” href=”https://www.appreviewes.com”> Appreviewes.com</a>
Example Button:
Add Css on your Header:
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
border-radius: 8px;
border: 2px solid blue;
}
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
background-color: blue;
}
.button1:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
background-color: blue;
}
</style>
Then Copy and Paste the Blow mentioned Java script on your body:
For WordPress:
<script>
var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1000);
</script>
For Blogger:
<script>
//<![CDATA[
var downloadButton = document.getElementById("download");
var counter = 40;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the App in 40 seconds.";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the App in " + counter.toString() + " seconds.";
}}, 1000);
//]]>
</script>So hopefully in the final, all you have to understand is how you can add a countdown to WordPress,
Finally Paste the Button demo
<button class="button button1"><a id="download" style="color:White; text-decoration: none;" href="#"> Download</a> </button>
Remove # and Replace it with your link..Thats all
