How To Add Count Down Timer/Clock In Blogger Posts And In sidebars…

How to Add Count Down Timer in Blogger Posts and In Sidebar…

Count down timer help you count down to any special event like Christmas, New Year, etc. You can even put count down timer for sales advertisement, promotion, etc.

Remaining for New Year

In this post I have shared the HTML code for count down timer. You need to add this code where you want to display count down timer.

Copy the Below Code....

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2020 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Add the Count down timer in Blogger post…

1- Open Blogger and login to your account.

2- Open the post in which you want to display count down timer.

3- Switch your blog editing mode i.e. from Compose to HTML.

4- Choose a place in your blog where you want to display count down timer.

5- Once to get the desired place paste the HTML code.

Now you have to make some changes in the HTML code. Specially the Date and Time.

6- Now search the below line in HTML Code.

var deadline = new Date("Jan 5, 2020   15:37:25").getTime();

7- Here, you have to insert your event date and time. 

(Example- if it is a New year then put this- “Jan 1, 2020 00:00:00”)

In blue highlighted part insert your event DATE with month and year. And in green highlighted part put the exact TIME of your event.

8- Now search the below code in your HTML.

if (t < 0) {         clearInterval(x);         document.getElementById("demo").innerHTML = "EXPIRED";

9- The text highlighted in pink will appear when your count down time gets over.

Change the text according to your event.

(Example- If it a new year then insert- "HAPPY NEW YEAR" -this will appear when your countdown time get over).

Read - How To Display AdSense Ads Inside Post And In Between Post.

Read-  How to use Post Editing Tools?

Add Count down timer in Sidebar, Upper bar…

1- Open Blogger and Login into it.

2- Go to Layout.

3- Click on add a gadget where you want to display Count down time.

4- Choose HTML/JavaScript gadget.

5- Paste the code.

6- Make the changes as shown below

var deadline = new Date("Jan 5, 2020   15:37:25").getTime();

Change the above code as per your event’s date and time. (Example- if it a New year then-  “Jan 1, 2020 00:00:00”)

In blue highlighted part insert your date. And in green highlighted part put the exact time of your event.

7- Now search the below code in your HTML.

if (t < 0) {         clearInterval(x);         document.getElementById("demo").innerHTML = "EXPIRED";

The text highlighted in pink will appear when your count down time gets over.

Change this text according to your event.

(Example- If it a new year then insert- "HAPPY NEW YEAR" -this will appear when your count down time get over).

Related- How to Add Facebook Page Gadget in Blogger...

Related- How to Adjust the size of Table for all screens/devices...

Related- How to add Go To Top button and change it's icon.