Sep 21, 2017

Membuat Countdown Timer 24 Jam Untuk Promo di Blog

Countdown Timer

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>
Perhatikan langkah penerapan kodenya, untuk hitungan mundurnya silahkan sobat atur dan sesuaikan dengan kebutuhan. Dan selesai selamat mencoba semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.