Membuat Countdown 1 Jam Untuk Keperluan Promo
Jika Anda kebetulan sedang mengadakan promo baik barang maupun jasa dan ditayangkan di blog, mungkin salah satu cara untuk menarik minat pengunjung untuk mengikuti promo yang sedang berlangsung dapat dicoba dengan menambahkan countdown.Dengan begitu diperlukan pengunjung akan eksklusif daftar atau mengikuti promo alasannya ialah melihat hitung mundurnya sehingga mereka merasa khawatir tidak kebagian promo hehehe....
Untuk itu aku menemukan simple countdown dengan javascript di JSFiddle yang lalu aku rubah menjadi tampilan H:M:S dan menambahkan style menyerupai pada Fiddle di bawah ini.
Jika tertarik untuk mencobanya silahkan gunakan kode-kode di bawah ini.
Copy instruksi CSS di bawah ini dan simpan di style blog Anda.
@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;
}
Kemudian simpan instruksi javascript ini di atas
</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 = 60 * 60,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
//]]>
</script>
Kemudian untuk menampilkan countdown-nya gunakan instruksi HTML di bawah ini
<div class="countdown">
<span class="countdown_text">Registration closes in</span>
<span id="time">01:00:00</span>
<span>minutes!</span>
</div>
0 Response to "Membuat Countdown 1 Jam Untuk Keperluan Promo"
Posting Komentar