Countdown Timer Script for Blogger

By Coder DracWound - January 10, 2022

Countdown Timer is very useful to attractive customers to generate leads for your blog or affiliates in a limited time.

Demo

90% Off on Blogger Themes ends in

00 Days

00 Hours

00 Minutes

00 Seconds

Join Now

How to add Countdown Timer?

Step 1 : Go to your Blogger Dashboard.

Step 2 : Go to Layout

Step 3 : Add Html/Javascript widget

This will not work in Sidebars so place the code in Main Content Area

Step 4 : Paste the code given below in the widget

Join us Now


<style>
.sectiontimer{padding:10px 0;border-radius:10px;box-shadow:2px 1px 20px #9c9c9c,-2px -1px 20px #9c9c9c;}
.countdown-container{width:100%;display:flex;align-items:center;justify-content:center;}
.sqBox{color:#000;width:100px;height:60px;padding:10px 5px 5px 5px;background-color:#efefef;border-radius:10px;margin:10px;font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;}
.colFlex{display:flex;flex-direction:column;align-items:center;}
.font30{font-size:30px;}
.font20{font-size:25px;}
.font10{font-size:10px;}

  </style>
<section class="sectiontimer">
 <center><p class="heading font20">90% Off on Blogger Themes ends in </p></center>

  <div class="countdown-container">

    <div class="colFlex sqBox"> <span class="days font30">00</span> <span class="font10"> Days</span> </div>

    <div class="colFlex sqBox"> <span class="hours font30">00</span> <span class="font10">Hours </span></div>

    <div class="colFlex sqBox"> <span class="minutes font30">00</span> <span class="font10">Minutes </span></div>

      <div class="colFlex sqBox"> <span class="seconds font30">00</span> <span class="font10">Seconds</span> </div>


    </div>
<div><center>
<a class="desBut button" href="https://giveaway.bloggingmafias.com"> Join Now </a></center>
</div>
</section>
    <script>
      const dayDisplay = document.querySelector(".days"),
        hourDisplay = document.querySelector(".hours"),
        minuteDisplay = document.querySelector(".minutes"),
        secondDisplay = document.querySelector(".seconds"),
        countdownContainer = document.querySelector(".countdown-container"),
        endDate = new Date("January 14 2023 00:00:00");
      let maintenanceDone = !1;
      const updateTimer = () => {
        let e = new Date;
        var t = endDate.getTime() - e.getTime();
        t <= 1e3 && (maintenanceDone = !0);
        var n = 36e5,
          o = Math.floor(t / 864e5),
          a = Math.floor(t % 864e5 / n),
          n = Math.floor(t % n / 6e4),
          t = Math.floor(t % 6e4 / 1e3);
        dayDisplay.innerText = o < 10 ? "0" + o : o, hourDisplay.innerText = a < 10 ? "0" + a : a, minuteDisplay.innerText = n < 10 ? "0" + n : n, secondDisplay.innerText = t < 10 ? "0" + t : t
      };
      setInterval(() => { maintenanceDone ? (countdownContainer.style.display = "none") : updateTimer() }, 1e3);
    </script>
<script language="javascript">document.write( unescape( '%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%63%6F%64%65%2E%6A%71%75%65%72%79%2E%63%6F%6D%2F%6A%71%75%65%72%79%2D%31%2E%31%31%2E%30%2E%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%3E%0A%20%20%2F%2F%3C%21%5B%43%44%41%54%41%5B%0A%20%20%24%28%64%6F%63%75%6D%65%6E%74%29%2E%72%65%61%64%79%28%66%75%6E%63%74%69%6F%6E%28%29%0A%20%20%7B%0A%20%20%20%20%76%61%72%20%61%61%20%3D%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%76%61%6C%28%29%3B%0A%20%20%20%20%69%66%20%28%61%61%20%3D%3D%20%6E%75%6C%6C%29%20%7B%0A%20%20%20%20%20%20%77%69%6E%64%6F%77%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%20%3D%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%61%74%74%72%28%22%68%72%65%66%22%2C%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%29%3B%0A%20%20%7D%29%3B%0A%20%20%2F%2F%5D%5D%3E%0A%3C%2F%73%63%72%69%70%74%3E%0A%3C%64%69%76%20%69%64%3D%27%6D%79%63%72%65%64%69%74%27%73%74%79%6C%65%3D%22%6F%70%61%63%69%74%79%3A%30%3B%22%3E%0A%20%20%44%65%73%69%67%6E%65%64%20%42%79%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%27%20%69%64%3D%27%23%6D%79%63%72%65%64%69%74%27%3E%44%72%61%63%57%6F%75%6E%64%20%48%65%6C%70%73%3C%2F%61%3E%0A%3C%2F%64%69%76%3E' ))</script>

Step 5 : Change the Title Text which is marked with your title text.

Step 6 : Change the link with your link.

Step 7 : Change the Date and Time which is marked with your End Date and Time in the exact same Format.

Step 8 : Now visit your website.

Conclusion

So, in this article , I have told how to make countdown timer in blogger. If you get any error or you are not able to add it then you can contact us at our telegram group. We will surly help you out.

Search This Blog

DracWound Helps