Beranda
JavaScript
Styles

Cara Membuat Widget Penawaran dengan Penghitung Waktu Mundur untuk Blogger

Buat Penghitung Waktu Mundur untuk acara, penawaran, penjualan, dan diskon mendatang di situs web Anda menggunakan HTML, CSS, dan JavaScript.
Admin

Apakah situs web Anda menjual produk? Jika ya, Anda dapat membuat Penghitung Waktu Mundur untuk diskon, penawaran, dan penjualan Anda dalam jangka waktu terbatas. Anda dapat menampilkan sisa waktu diskon atau penawaran. Selain itu, ketika acara berakhir, mereka akan melihat notifikasi "Penawaran Berakhir!".

Countdown Timer using HTML, CSS and JavaScript
Countdown Timer | Fineshop Design

Dalam artikel ini, saya akan berbagi cara membuat Penghitung Waktu Mundur menggunakan HTML, CSS, dan JS untuk Situs Web Blogger Anda.

Tidak harus hanya untuk penawaran atau diskon saja, Anda bisa memanfaatkannya untuk keperluan atau acara lain.

Sebelum kita mulai, mari kita lihat Demo-nya.

Bagaimana cara membuat Penghitung Waktu Mundur?

Membuat Penghitung Waktu Mundur untuk Situs Web Blogger Anda tidak memerlukan banyak pengetahuan tentang HTML, CSS, atau JS karena saya sudah merancangnya untuk Anda. Anda hanya perlu menempelkan kode berikut di postingan, halaman, atau di mana pun melalui tampilan HTML.

  1. Pertama-tama Masuk ke Dashboard Blogger Anda.
  2. Pada Dasbor Blogger, klik Halaman atau Posting.
  3. Buat halaman atau postingan baru dengan mengklik ikon atau klik halaman atau postingan yang ada untuk menambahkan kode di sana.
  4. Beralih ke Tampilan HTML.
  5. Tempelkan kode berikut di tempat Anda ingin menambahkan Penghitung Waktu Mundur.

    Jika templat Anda memiliki fitur mode gelap, dan Anda menginginkan warna yang berbeda saat mode gelap, Anda dapat menyesuaikan kode sesuai kebutuhan. Setiap templat dapat memiliki kelas mode gelap yang berbeda, jadi silakan sesuaikan. Anda dapat mengganti kelas yang ditandai dengan kelas mode gelap templat Anda.

    <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+07:00');
  
  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>

    Saya akan merekomendasikan untuk menambahkan kode CSS tersebut di bagian head pada template Anda.

  6. Ubah bagian yang ditandai sesuai keinginan Anda dan Publikasikan Halaman atau Postingan Anda.

    Ganti January 1 2000 00:00:00 GMT+07:00 dengan Tanggal dan Waktu berakhirnya.

Selesai!

Kesimpulan

Ini semua tentang membuat Widget Penawaran dengan Penghitung Waktu Mundur menggunakan HTML, CSS, dan JavaScript untuk Situs Web Blogger Anda. Semoga Anda menikmati artikel ini. Silakan bagikan artikel ini. Dan jika Anda mengalami masalah di bagian mana pun atau memiliki pertanyaan, silakan tanyakan kepada kami di kolom komentar. Terima kasih!

Copyright (c):
fineshopdesign.com

Posting Komentar