Categories
Uncategorized

How To Create A Countdown Timer In WordPress Without A Plugin or without any short-code

Countdown timers are very useful to increase time on page and reduce bounce rate in your blog post. There are many ways to create countdown timer in your WordPress blog. You can create countdown timer using plugin.But if you want to make your own countdown timer, you are in the right place. In this post, we will tell you how to create a countdown timer using the simple JavaScript.In this post you will learn how to make a countdown timer before displaying the download link without using “id” attribute.Simple JavaScript and HTML Countdown Timer

HTML Code for WordPress Countdown Timer

Use this HTML code in your WordPress blog post where you want to add download button with countdown timer.you can use this HTML code multiple times and in multiple post according to your needs. Just replace the https://your-download with your URL which you want to show at the end of countdown timer.

<button onclick="myDownloadFunction(this,'https://your-download')">Click Here to get Download link</button>

JavaScript Code for WordPress Countdown Timer

Place this JavaScript code in your WordPress theme code just before </body> tag. You can achieve this with the help of child theme of your WordPress theme.

<script>
function myDownloadFunction(ele,url) {
var counter = 10;
var a = document.createElement('a');
var link = document.createTextNode("Download Now"); 
                a.appendChild(link); 
                a.href = url;  
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
ele.parentNode.replaceChild(newElement, ele);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(a, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1500);

};

</script>

CodePen block for 10 second WordPress countdown timer

Categories
Uncategorized

How to Make Countdown Timer Before Displaying Download Link

In this post you will learn how to make a countdown timer before displaying the download link without using “id” attribute.
Simple JavaScript and HTML Countdown Timer

HTML Code for Countdown Timer

<button onclick="myDownloadFunction(this,'https://your-download')">Click Here to get Download link</button>

JavaScript Code for Countdown Timer

<script>
function myDownloadFunction(ele,url) {
var counter = 10;
var a = document.createElement('a');
var link = document.createTextNode("Download Now"); 
                a.appendChild(link); 
                a.href = url;  
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
ele.parentNode.replaceChild(newElement, ele);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(a, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1500);

};

</script>

CodePen block for 10 second countdown timer using HTML and JavaScript

Categories
Uncategorized

How to create multiple spoilers without using id attributes

Spoilers help in hiding and displaying content according to the users need. Spoilers are also used to save space in your web page.You can easily write FAQ and terms conditions in a very small space with spoilers.
Today in this post we will tell about how to make spoilers without using id attribute. After reading this article, you will be able to make more than one spoilers without using the ‘id’ attributes.

What is spoilers and what is it used for ?

With the help of spoilers, you can create content of display and height type. And using spoilers you can also create a quiz in which you can hide the answer by default and when the user wants to see the answer, they can see the answer in just one click.

Spoiler HTML

<div class="spoiler">
<div class="spoiler-toggle">
spoiler heading
</div>
<div class="spoiler-content">
your hidden content
</div>
</div>

Spoiler Script

<script>
 var spTog = document.querySelectorAll('[class="spoiler-toggle"]');

spTog.forEach(function(toggle) {
toggle.addEventListener('click', function(event)
{
 event.target.closest('.spoiler').classList.toggle('open');
   
});
});
</script>

Spoiler CSS

<style>
.spoiler {
border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    color: #333;
    margin-bottom: 1.5em
}

.spoiler .spoiler-content {
    padding-top: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
    padding-left: 7px;
    font-weight: bold;
}

.spoiler:not(.open) .spoiler-content {
    padding: 0;
    height: 0;
    overflow: hidden;
    
}
[class='spoiler-toggle'] {
    position: relative;
    min-height: 22px;
    line-height: 22px;
    padding: 7px 7px 7px 7px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    border-radius: 10px;
    background: #f0f0f0;
    font-size: 1em;
    cursor: pointer;
}

</style>

How to add a spoiler without using short-code based plugin in WordPress

If you are using WordPress CMS, then you can create more than one spoiler without any short code.

Step (1) :- You can use the Spoiler HTML code as many times as you want.

<div class="spoiler">
<div class="spoiler-toggle">
spoiler heading
</div>
<div class="spoiler-content">
your hidden content
</div>
</div>

Step (2) :- Apply Spoiler Script before </body> tag of the page. you can do this by directly applying in your theme or if you just need Spoiler in your few post you can also apply the Spoiler Script in post.

<script>
 var spTog = document.querySelectorAll('[class="spoiler-toggle"]');

spTog.forEach(function(toggle) {
toggle.addEventListener('click', function(event)
{
 event.target.closest('.spoiler').classList.toggle('open');
   
});
});
</script>

To apply Spoiler Script in individual post just choose Custom HTML block at the post bottom and paste Spoiler Script code.

Step (3) :- And in the final step add Spoiler CSS in your WordPress theme using additional CSS options or with the help of child theme.

<style>
.spoiler {
border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    color: #333;
    margin-bottom: 1.5em
}

.spoiler .spoiler-content {
    padding-top: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
    padding-left: 7px;
    font-weight: bold;
}

.spoiler:not(.open) .spoiler-content {
    padding: 0;
    height: 0;
    overflow: hidden;
    
}
[class='spoiler-toggle'] {
    position: relative;
    min-height: 22px;
    line-height: 22px;
    padding: 7px 7px 7px 7px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    border-radius: 10px;
    background: #f0f0f0;
    font-size: 1em;
    cursor: pointer;
}

</style>