How to make Offer Widget with Countdown Timer for Blogger

Hello! Welcome to EmadulAi.

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 the remaining time of the discounts or offers. Also, when the event ends, visitors will see a notification saying “Offer Ended!”.

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 offers or discounts; you can also use it for other purposes or events.

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.

1. First of all, login to your Blogger Dashboard.
2. On Blogger Dashboard, click Pages or Posts.
3. Either create a new page or post by clicking on the ➕ icon or click on an existing page/post where you want to add the codes.
4. Switch to HTML View.
5. Paste the following codes where you want to add the Countdown Timer.

Note: If your template has a dark mode feature, and you want a different color when in dark mode, you can customize 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’s dark mode class.

<style>
/* Countdown Discount by EmadulAi */
.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 EmadulAi ]-->
<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 EmadulAi */
  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 recommend adding the CSS codes in the <head> section of your Blogger template.

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 an Offer Widget with Countdown Timer using HTML, CSS and JavaScript for your Blogger Website. I hope you enjoyed this article. Please do share it with others. If you are facing any problems or have any questions, feel free to ask in the comment box. Thank you!