×

search by faronesia.com

FARONESIA.COM
Profesional and Specialist WebDesign

Unduh dan dapatkan template blogger terbaik mulai dari premium hingga gratis tersedia di Faronesia.com

Unduh sekarang

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.
Buka komentar
Tutup komentar
  1. Sangat bermanfaat tutorialnya om adnin. Apakah ada yg berupa widget saja om, soalnya klo ngutak atik template takutnya error heheh.

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

    BalasHapus
    Balasan
    1. Maaf mbak template yang saya pakai tidak di jual

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Developer

test-1 test-2
Saya adalah seorang Web Designer dan Front-End Developer, 5 tahun dalam pengalaman bermain coding sejak SMA. Pemilik Blog Faronesia sekaligus Desainer Template Blogger.

azza / owner faronesia
Saya adalah mahasiswi sekaligus penulis lepas di sela-sela kesibukan saya. Penulis Faronesia sekaligus penyempurna naskah artikel.

shofi / author faronesia
Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup