How to add Countdown Offer Widget Timer for Blogger | satyakipathshala.in

Countdown Offer Widget Timer for Blogger: Hello! Welcome to Satya Ki Pathshala Today in this article I will show you how to add a Countdown Timer Offer Widget on Blogger Website. If you sell products on your website then you can make a Countdown Timer for the discounts, offers, sales, etc.

You can show your website visitors the remaining time of offers and discounts. Along with that, the visitors will also get notified when the offer ends saying 'Offer Ended!.'

Countdown Offer Widget Timer

You can simply make a Countdown Offer Timer by using simple HTML, CSS & JS. You can also use this script for other purposes or events.

View Demo

---

Related Posts

How to make Countdown Offer Widget

STEP 1: First of all Login into your Blogger Dashboard.

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

STEP 3: Either create a new 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 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 dark mode class.

HTML

<style>
.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>

<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[*/  
  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>

It is recommended to add the CSS codes in the head section of your template.

STEP 6: Now publish your page or post.

You can change the values in the code as per your requirement like:

.darkMode
-30%
Are you fast enough?
Grab a massive discount of 30%, be fast, because the discount is available only for limited time.
Oops! Offer Ended.
You are so late reaching here.
Buy Now!
January 1 2000 00:00:00 GMT+05:30

Don't forget to replace January 1 2000 00:00:00 GMT+05:30 it with your custom Date and Time.

Done!

Source:
www.fineshopdesign.com

Conclusion

I hope you liked this article How to add Countdown Offer Widget Timer for Blogger Website. Don't forget to share this article with others because sharing is caring. For this kind of valuable information for a blogger website, Bookmark this Blog Site. See you soon in the next post.

Go to Link