Countdown timer script For blogger

Creating a countdown timer script

for a Blogger (Blogspot) website involves using HTML, JavaScript, and some CSS. Here's a basic example of how you can add a countdown timer to your Blogger blog:

Log in to your Blogger account

and navigate to the blog where you want to add the countdown timer.

Create a new blog post

or edit an existing one where you want to display the countdown timer.

Switch to HTML

mode in the Blogger post editor.

Add the following HTML

and JavaScript code to your blog post where you want the countdown timer to appear:

<!DOCTYPE html>

<html>

<head>

  <title>Countdown Timer</title>

</head>

<body>

  <div id="countdown">

    <div id="timer">

      <span id="days"></span>

      <span id="hours"></span>

      <span id="minutes"></span>

      <span id="seconds"></span>

    </div>

  </div>

  <script>

    // Set the date and time for the countdown

    var countDownDate = new Date("September 30, 2023 00:00:00").getTime();

    // Update the countdown every second

    var x = setInterval(function() {

      var now = new Date().getTime();

      var distance = countDownDate - now;

      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);

      document.getElementById("days").innerHTML = days + "d ";

      document.getElementById("hours").innerHTML = hours + "h ";

      document.getElementById("minutes").innerHTML = minutes + "m ";

      document.getElementById("seconds").innerHTML = seconds + "s ";

      if (distance < 0) {

        clearInterval(x);

        document.getElementById("countdown").innerHTML = "EXPIRED";

    }, 1000);

  </script>

</body>

</html>

Customize the countdown

date and time by changing the countDownDate variable to your desired date and time in the format "Month Day, Year HH:MM:SS".

Switch back to Compose

mode in the Blogger post editor if needed.

Preview or Publish

your blog post to see the countdown timer in action.

This code creates a simple countdown timer that counts down to the specified date and time. You can further customize the appearance of the timer by modifying the CSS styles and layout as needed.

Web Beast Online