loading...

Membuat Countdown Timer 24 Jam Untuk Promo Di Blog

Loading...
 Di kesempatan kali ini aku akan membuatkan seputar skrip arahan cara menciptakan hitungan mundur  Membuat Countdown Timer 24 Jam Untuk Promo di Blog

Di kesempatan kali ini aku akan membuatkan seputar skrip arahan cara menciptakan 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 sebab 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 memiliki blog Onlineshop atau yang sedang memperlihatkan Promosi lainnya.

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

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

Langkah Pertama
Silahkan sahabat salin arahan Javascript dibawah ini kemudian 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 kemudian 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 kemudian 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>
Perhatikan langkah penerapan kodenya, untuk hitungan mundurnya silahkan sahabat atur dan sesuaikan dengan kebutuhan. Dan simpulan selamat mencoba biar bermanfaat.

Sumber http://www.dibalikseo.com
Loading...

Subscribe to receive free email updates:

0 Response to "Membuat Countdown Timer 24 Jam Untuk Promo Di Blog"

Posting Komentar