Membuat Countdown Timer 24 Jam Untuk Promo di Blog

Di kesempatan kali ini aku akan menyebarkan seputar skrip arahan 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 teman yang mempunyai blog Onlineshop atau yang sedang menyampaikan Promosi lainnya.

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

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

Langkah Pertama

Silahkan teman salin arahan Javascript dibawah ini lalu letakkan di arahan </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 arahan 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 arahan HTML dibawah ini lalu letakkan dimana teman 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 teman atur dan sesuaikan dengan kebutuhan. Dan final selamat mencoba supaya bermanfaat.