Cara Mudah Membuat Animasi Countdown Timer di Website

Selamat datang di The Royal Moringa. Sebelumnya, pernahkah anda melakukan pembelian barang-barang atau kebutuhan tertentu secara online? Jika pernah, apakah anda pernah mengikuti event promosi berbatas waktu yang diselenggarakan oleh website tersebut? Saya yakin sebagian besar dari anda pasti pernah berbelanja online terutama saat diadakan promosi diskon yang besar.

Pernahkah anda perhatikan bahwa pada kondisi tertentu seperti saat peluncuran perdana, waktu dimulai atau diakhirinya promosi, dan perayaan suatu event terdapat widget penghitung waktu mundur? Widget tersebut dikenal dengan nama Countdown Timer. Widget ini berfungsi untuk memberitahu dan mengingatkan pengguna/pembaca website kapan event akan dimulai atau segera berakhir.

Dengan adanya Countdown Timer, pengunjung website menjadi tidak ketinggalan suatu event atau promosi. Sebagai contoh, website yang sering menggunakan fitur Countdown Timer diantaranya official store saat grand launching dan situs e-commerce yang sedang mengadakan flash sale maupun diskon untuk pembelian tiket pesawat, kereta api, dan hotel.

Jika anda tertarik dengan fitur Countdown Timer untuk dipasang di blog atau website anda, tidak ada salahnya untuk mencoba. Berikut merupakan cara mudah untuk menambahkan widget Countdown Timer di blog atau website.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > klik Edit HTML

2. Cari kode ]]></b:skin> kemudian copy dan paste kode script css berikut di atas kode ]]></b:skin>

.countdown {
  margin: 0 auto;
  background-color: #222;
  text-align: center;
}
.countdown .header {
  color: #fff;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  margin: auto;
  padding-top: 20px;
}
.countdown .box {
  display: inline-block;
  padding: 0.5em;
  margin: 1em;
}
.countdown .numbers {
  font-size: 30px;
  font-weight: 300;
  color: #fff;
}
.countdown .text {
  margin-top: 10px;
  color: #eee;
}
.countdown .button {
  margin-top: auto;
  padding-bottom: 20px;
}
.countdown .info {
  background-color: rgb(51 , 204 , 51)!important; 
  border-radius: 3px; 
  border: 1px solid #33cc33; 
  color: white; 
  cursor: pointer; 
  height: 28px; 
  padding: 3px 16px;
}

3. Berikutnya cari </head> kemudian copy dan paste kode JavaScript berikut di atasnya

<script type="text/javascript">
var counter = {};
window.addEventListener("load", function () {
  
  counter.end = Date.UTC(2021, 11, 31, 12, 0, 0);
  counter.day = document.getElementById("countDownDays");
  counter.hr = document.getElementById("countDownHours");
  counter.min = document.getElementById("countDownMinutes");
  counter.sec = document.getElementById("countDownSeconds");
  counter.end = Math.floor(counter.end / 1000);
  counter.remain = counter.end - Math.floor(Date.now() / 1000);

  if (counter.remain > 0) {
    counter.ticker = setInterval(function(){
    counter.remain--;
      if (counter.remain <= 0) { 
        clearInterval(counter.ticker); 
        counter.remain = 0;
      }

      var secs = counter.remain;
      var days = Math.floor(secs / 86400); 
      secs -= days * 86400;
      var hours = Math.floor(secs / 3600); 
      secs -= hours * 3600;
      var mins  = Math.floor(secs / 60); 
      secs -= mins * 60;

      counter.day.innerHTML = days;
      counter.hr.innerHTML = hours;
      counter.min.innerHTML = mins;
      counter.sec.innerHTML = secs;
    }, 1000);
  }
});
</script>

4. Silakan anda ganti kode script Date.UTC(2021, 11, 31, 12, 0, 0) dengan waktu berakhirnya timer sesuai yang anda kehendaki dengan urutan (tahun, bulan, tanggal, jam, menit, detik)

Keterangan :

Bulan Januari dimulai dari angka 0 sehingga Bulan Desember diberi angka 11
Waktu timer mengacu pada Coordinated Universal Time (UTC±0) bukan waktu di daerah anda

Contoh :

Anda sekarang berada di Jakarta (UTC+7) dan menghendaki timer berakhir pada 31 Desember 2021 jam 19:00 WIB maka yang anda tulis (2021, 11, 31, 12, 0, 0). Ingat, bulan Desember diberi angka 11 dan karena anda berada pada zona UTC+7 maka jam 19:00 harus dikurangi 7 jam menjadi jam 12:00.

5. Berikutnya pada bagian <body>, silakan anda tentukan letak widget Countdown Timer ini apakah setelah dropdown menu, sebelum footer, atau yang lainnya > copy dan paste kode script berikut sesuai letak yang telah anda pilih

<div class="countdown">
      <h1 class="header">
SILAKAN BERI JUDUL COUNTDOWN TIMER ANDA </h1>
<div class="box">
        <div class="numbers" id="countDownDays">
00</div>
<div class="text">
HARI</div>
</div>
<div class="box">
        <div class="numbers" id="countDownHours">
00</div>
<div class="text">
JAM</div>
</div>
<div class="box">
        <div class="numbers" id="countDownMinutes">
00</div>
<div class="text">
MENIT</div>
</div>
<div class="box">
        <div class="numbers" id="countDownSeconds">
00</div>
<div class="text">
DETIK</div>
</div>
<div class="button">
   <a href="SILAKAN BERI URL HALAMAN ANDA"><button name="info" class="info"><i aria-hidden="true" class="fa fa-desktop"></i> Info</button></a>
    </div>
</div>

6. Ada kabar baik bagi semua pembaca The Royal Moringa. Countdown Timer yang anda pasang telah dilengkapi dengan tombol hyperlink untuk menuju suatu halaman. Tombol atau button ini berfungsi untuk mengarahkan pengunjung menuju halaman informasi mengenai event atau promosi yang sedang anda lakukan.

7. Silakan anda ubah Judul Countdown Timer dan URL halaman informasi sesuai dengan yang anda kehendaki.

8. Save Theme

Sangat mudah kan? Semoga informasi di atas dapat membantu anda dalam membuat animasi Countdown Timer dilengkapi dengan tombol hyperlink di Website. Bila masih ada yang kurang jelas bisa disampaikan di kolom komentar. Terima kasih telah membaca.

The Royal Moringa

Cara Mudah Membuat Animasi Countdown Timer di Website

Post a Comment

0 Comments

Popular Posts

Perbedaan Penulisan Sumber Kutipan & Daftar Pustaka

Cara Mudah Membuat Form Pendaftaran di Blog

Cara Cepat Menemukan Kata di Chat Line

Categories

Footer Menu Widget

The Royal Moringa

Cara Mudah Membuat Animasi Countdown Timer di Website

You may like these posts

Post a Comment

0 Comments

Social Plugin

Popular Posts

Perbedaan Penulisan Sumber Kutipan & Daftar Pustaka

Cara Mudah Membuat Form Pendaftaran di Blog

Cara Cepat Menemukan Kata di Chat Line

Categories

Footer Menu Widget