Cara membuat countdown timer promo diblog

Faronesia.com - Hallo blogger, pada kesempatan hari ini admin akan memberikan tutorial cara membuat countdown timer/hitungan mundur yang pasti bisa anda set waktu sesuka anda. Biasanya countdown/hitungan mundur ini seperti ini digunakan untuk melakukan promo berbatas pada blog maupun website yang mempunyai bisnis tertentu.

Cara pemasangan countdown timer/hitungan mundur ini sangatlah mudah, anda hanya cukup menambahkan sedikit beberapa kode script ke dalam template blog yang anda miliki yang akan ditampilkan hitungan mundur.


Fungsi dari hitungan mundur ini biasanya di pakai oleh blog ollshop yang sedang menawarkan promo discount dll. Tutorial ini sangat cocok sekali bagi anda yang memiliki blog olshop atau jual beli lainnya.

Lihat demo secara langsung dibawah ini
Cara membuat countdown timer promo diblog
  • Silahkan masuk ke dashboard blog anda
  • Lalu masuk ke menu template dengan mengklik tema
  • Selanjutnya klik edit html
  • Cari kode </body>
  • Letakkan kode dibawah ini tepat diatas kode </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>
  • Lalu cari kode </style>
  • Letakkan kode css dibawah ini tepat diatas kode </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;
}
  • Lalu simpan tema/terapkan
  • Selanjutnya untuk menampilkan countdown timer silahkan copy kode dibawah ini lalu tempelkan dimana saja seperti dipostingan, halaman statis, maupun di slot widget.
<div class="countdown">
  <span class="countdown_text">Promo akan tutup pada</span>
  <span id="time">24:00:00</span>
  <span>menit</span>
</div>
Catatan:
Ubah kalimat yang berwarna merah sesuai keinginan anda.
  • Selesai, lalu simpan.
Demikianlah mengenai cara membuat countdown timer promo diblog semoga bermanfaat untuk para sahabat blogger. jangan lupa share dan jika ada tanggapan serta masukkan silahkan masukkan pada kolom komentar yang telah tersedia.

4 komentar dari postingan "Cara membuat countdown timer promo diblog"

  1. Sangat bermanfaat tutorialnya om adnin. Apakah ada yg berupa widget saja om, soalnya klo ngutak atik template takutnya error heheh.

    ReplyDelete
  2. Ini template yg dipakai admin viomagz ya, kok cantik redesignnya melebihi aslinya, kalau boleh saya beli mas berapapun harganya.

    ReplyDelete
    Replies
    1. Maaf mbak template yang saya pakai tidak di jual

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Website ini dilindungi oleh Google DMCA. Dilarang keras menyalin (copy/paste) sebagian atau keseluruhan isi blog tanpa mencantumkan sumber link aktif dari website www.faronesia.com