Membuat Countdown Timer 24 Jam Untuk Promo di Blog

Di kesempatan kali ini aku akan membuatkan seputar skrip isyarat 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 gres sempat di buatkan Tutorialnya alasannya kesibukan kerja.

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

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

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

Langkah Pertama

Silahkan sahabat salin isyarat Javascript dibawah ini lalu letakkan di isyarat </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 isyarat 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 isyarat HTML dibawah ini lalu letakkan dimana sahabat 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 sahabat atur dan sesuaikan dengan kebutuhan. Dan tamat selamat mencoba biar bermanfaat.