Cara Membuat Count Down Pada Blogger

Biasanya seorang developer ketika akan menjual produk ke client mereka membuat count down timer pada web mereka. Sebenarnya gak cuman developer saja, terkadang ketika maintenance website pun dibuat count down timer.

Fungsi dari count down timer sangat banyak, salah satunya ketika akan rilis produk baru, bisa juga ketika memberikan promo, dan masih banyak lagi manfaat count down timer.

Sebenernya saya ngga suka basa basi, tapi karena kalau tanpa basa basi blog ini isi tulisannya sedikit dan otomatis nilai seo nya kurang, jadi ya terpaksa deh basa basi seadanya wkwk.

Langsung ke pembahasan utama yaitu cara membuat count down pada blogger.

Oh ya, tutorial ini saya dapat dari blog kompi ajaib yang merupakan pembuat template blogger premium yang sudah terkenal, semoga saya bisa membuat template yang bagus seperti kang adhi.

Cara membuat count down pada blog.

Buka tata letak blogger, kemudian add widget html/javascript dan copy paste script dibawah ini.

<style>

@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;

}

</style>

<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 = 180 * 60,

    display = document.querySelector('#time');

  startTimer(fiveMinutes, display);

};

//]]>

</script>

<br />

<div class="countdown">

<span class="countdown_text">Registration closes in</span>

  <span id="time">Start Timer</span>

  minutes!

</div>

Oh iya script ini hanya saya modifikasi pada bagian "Start Timer" dan saya ganti waktunya menjadi 3 jam. 

Untuk melihat demo silakan lihat demo disini. Terimakasih, jika ada pertanyaan silakan berkomentar.

Subscribe to receive free email updates: