How to make Offer Widget with Countdown Timer for Blogger

Hello! Welcome to Fineshop Design.

Do your website sell products? If yes, then you can make a Countdown Timer for your discounts, offers and sales for a limited time period. You can show what is the remaining time of the discounts or offers. Also when the event will end, they will see a notification saying 'Offer Ended!'.

Countdown Timer using HTML, CSS and JavaScript

In this article, I will share how to make a Countdown Timer using HTML, CSS and JS for your Blogger Website.

It is not necessary that it is made only for the offers or discounts, you can use it for other purposes or events.

Before we start let's take a look at its Demo.

View Demo

How to make a Countdown Timer?

Creating a Countdown Timer for your Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to paste the following codes in a post, page or anywhere else through HTML view.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Pages or Post.

Step 3: Either create a new page or post by clicking on icon or click on the existing page or post to add codes there.

Step 4: Switch to HTML view.

Step 5: Paste the following codes where you want to add the Countdown Timer.

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.

<style>
/* Countdown Discount by Fineshop Design */
.cdCont{position:relative;background:#f7f3f6;padding:55px 20px 30px;border-radius:10px;text-align:center;color:#08102b;font-family:inherit}
.cdCont[data-disc]:not([data-disc=''])::before{content:attr(data-disc);display:block;font-weight:700;font-size:13px;width:50px;height:50px;padding:10px 0 10px;background:#f5e2f1;border-radius:5px 5px 50px 50px;position:absolute;top:-5px;right:50px}
.cdCont .cdH{margin:0 0 20px;font-size:1.3rem;font-weight:700}
.cdCont .cdD{font-size:15px}
.cdCont .cdHeadA .cdD{margin-bottom:25px}
.cdCont .cDown{width:100%;font-size:20px;text-align:center;font-weight:400;margin:20px 0}
.cdCont .cdBox{display:inline-block;width:55px;height:55px;margin:3px;padding-top:4px;background:#fff;border-radius:10px}
.cdCont .unit{display:block;font-size:10px;margin-top:-4px;opacity:.8}
.cdCont .btn{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:30px;line-height:20px;color:#fffdfc;background:#204ecf;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100px}
.cdCont.ended[data-disc]::before, .cdCont.ended .cdHeadB, .cdCont:not(.ended) .cdHeadA, .cdCont.ended .cdTmr{display:none}
.darkMode .cdCont{background:#252526;color:#fffdfc}
.darkMode .cdCont[data-disc]::before{background:#2d2d30}
.darkMode .cdCont .cdBox{background-color:#1e1e1e}
</style>

<!--[ Countdown Discount by Fineshop Design ]-->
<div data-disc='-30%' class='cdCont'>
  <div class='cdHeadB'>
    <div class='cdH'>Are you fast enough?</div>
    <div class='cdD'>Grab a massive discount of 30%, be fast, because the discount is available only for limited time.</div>
  </div>
  <div class='cdHeadA'>
    <div class='cdH'>Oops! Offer Ended.</div>
    <div class='cdD'>You are so late reaching here.</div>
  </div>
  <div class='cdTmr'>
    <div class='cDown'>
      <div class='cdBox'>
        <span class='days'>00</span>
        <span class='unit'>Days</span>
      </div>
      <div class='cdBox'>
        <span class='hours'>00</span>
        <span class='unit'>Hours</span>
      </div>
      <div class='cdBox'>
        <span class='minutes'>00</span>
        <span class='unit'>Minutes</span>
      </div>
      <div class='cdBox'>
        <span class='seconds'>00</span>
        <span class='unit'>Seconds</span>
      </div>
    </div>
    <a class='btn' href='#'>Buy Now!</a>
  </div>
</div>

<script>
  /*<![CDATA[*/
  /* Countdown Discount Script by Fineshop Design */
  const dayElm = document.querySelector('.cdBox .days'),
    hourElm = document.querySelector('.cdBox .hours'),
    minuteElm = document.querySelector('.cdBox .minutes'),
    secondElm = document.querySelector('.cdBox .seconds'),
    cdCont = document.querySelector('.cdCont'),
    endDate = new Date('January 1 2000 00:00:00 GMT+05:30');
  
  let eventEnded = !1;
  const updateTimer = () => {
    let e = new Date;
    var t = endDate.getTime() - e.getTime();
    t <= 1e3 && (eventEnded = !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);
    dayElm.innerText = o < 10 ? '0' + o :o, hourElm.innerText = a < 10 ? '0' + a :a, minuteElm.innerText = n < 10 ? '0' + n :n, secondElm.innerText = t < 10 ? '0' + t :t
  };
  setInterval(() => {
    eventEnded ? (cdCont.classList.add('ended')) : updateTimer()
  }, 1e3);
  /*]]>*/
</script>

I will recommend to add the CSS codes in the head section of your template.

Step 6: Change the marked parts as per your wish and Publish your Page or Post.

Replace January 1 2000 00:00:00 GMT+05:30 with your custom Date and Time.

That's done!

Conclusion

This is all about making a Offer Widget with Countdown Timer using HTML, CSS and JavaScript for your Blogger Website. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!