How to make Countdown Offer Widget for LayZee UI and Blogger | Kaily

© Kaily | Countdown Offer Widget

 Hey, there! welcome to Kaily.in

Today, I will be sharing How to make Countdown Offer Widget for your Blogger & LayZee UI website and of course also with HTML, CSS and JS.

It's not necessary that it is made only for the offers or discounts, you can use it for other purposes or events on your Blog or even simple website which uses HTML, CSS and JS.

Before we start for those sho want Demo can click Button Below 👇.

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 just to paste the following codes in a post, page or anywhere you want it and make sure to use HTML view insted of Compose view.

Step 1: First of all Login to your Blogger Dashboard

Step 2: On Blogger Dashboard, click Pages or Post or anywhere you want it .

Step 3: Once you are on Page/Post page switch to HTML view and paste the following code 👇.

CSS:

I'll recommend to add the CSS codes in the head section of your template and not on page/post page.

<style>
/* Countdown Discount by Kaily */
.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}
.drK .cdCont{background:#252526;color:#fffdfc}
.drK .cdCont[data-disc]::before{background:#2d2d30}
.drK .cdCont .cdBox{background-color:#1e1e1e}
</style>

HTML:

<!--[ Countdown Discount by Kaily ]-->
<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>

JS:

<script>
  /*<![CDATA[*/
  /* Countdown Discount Script by Kaily */
  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 2023 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>

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

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

Yay!! You have successfully created Countdown Offer Widget on your Website!

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

© Copyright::
www.kaily.in