Membuat Countdown Timer 24 Jam Untuk Promo di Blog

Di kesempatan kali ini saya akan berbagi seputar skrip kode cara membuat hitungan mundur atau sering disebut Countdown Timer. Waktu itu sempat ada yang bertanya bagaimana Cara Membuat Countdown Timer yang akan dipasang pada blog Onlineshop untuk keperluan Promosi. Mohon maaf untuk agan yang dulu pernah bertanya baru sempat di buatkan Tutorialnya karena kesibukan kerja.

Cara Membuat Countdown Timer 24 Jam Untuk Promo di Blog ini saya adopsi dari blognya Kang Andhy Suryadi yang kebetulan pernah memposting Tutorial Cara Membuat Countdown Timer Untuk Promo di Blog dan sedikit saya modifikasi tampilannya. Membuat Countdown Timer 24 Jam Untuk Promo di Blog sangat cocok bagi sobat yang mempunyai blog Onlineshop atau yang sedang menawarkan Promosi lainnya.

Pemasangan Countdown Timer ini sangatlah mudah hanya menambahkan sedikit kode script di dalam template blog dan akan ditampilkan hitungan mundur. Membuat Countdown Timer menurut saya sangat menarik dan bagus juga sehingga pengunjung akan segera dan mendaftarkan sebelum waktunya habis.

Nah bagi sobat yang mau mencobanya dapat mengikuti langkah penerapannya dibawah ini Cara Membuat Countdown Timer 24 Jam Untuk Promo di Blog.

Langkah Pertama

Silahkan sobat salin kode Javascript dibawah ini lalu letakkan di kode </body>.

<script>
//<![CDATA[
function startTimer(duration, display) {
  var timer = duration, hours, minutes, seconds;
  setInterval(function() {
    hours = parseInt(timer / 3600, 10);
    minutes = parseInt(timer % 3600 / 60, 10);
    seconds = parseInt(timer % 60, 10);

    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = hours + ":" + minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 1440 * 60,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};
//]]>
</script>

Langkah Ke Dua
Silahkan salin kode CSS dibawah ini lalu letakkan di style blog sobat.

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')
}
.countdown {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.countdown .countdown_text {
  display: block;
}
#time {
  font-family: Roboto, sans-serif;
  font-size: 40px;
  font-weight: 700;
  vertical-align: middle;
}

Langkah Ketiga
Untuk menampilkan Hitungan mundurnya atau Countdown Timernya silahkan salin kode HTML dibawah ini lalu letakkan dimana sobat mau menampilkannya.

<div class="countdown">
  <span class="countdown_text">Registration closes in</span>
  <span id="time">24:00:00</span>
  <span>minutes!</span>
</div>

Demo

Perhatikan langkah penerapan kodenya, untuk hitungan mundurnya silahkan sobat atur dan sesuaikan dengan kebutuhan. Dan selesai selamat mencoba semoga bermanfaat.