Want more tutorials? Request!

How to make Offer Widget with Countdown Timer for Blogger

Make a Countdown Timer for your website's upcoming events, offers, sales and discounts using HTML, CSS and JavaScript.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Make a Countdown Timer for your website's upcoming events, offers, sales and discounts using HTML, CSS and JavaScript.

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
© Fineshop Design | Countdown Timer

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.


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 . Thank you!

© Copyright:
www.fineshopdesign.com

Getting Info...

About the Author

Hey there! My name is Deo Kumar aka Dev, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

Buy me a Coffee

5 comments

  1. pls help
    it keep showing offer ended.
    1. It looks like you did not replace the Date and Time in the JavaScript.
    2. Comments is working if we hit reply button.
    3. You can fix it by replacing:
      (c =&gt; not c.inReplyTo)
      With:
      (c =&gt; not c.inReplyTo or c.inReplyTo == 0)
      in your Theme XML File.
  2. Hi, did Median UI comment error?
To avoid SPAM, all comments will be moderated before being displayed.
Don't share any personal or sensitive information.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.