Cara Mudah Membuat Countdown Timer Pada Website Blog

 

Membuat Countdown Timer

Jokam-Informatika.com Disini saya membahas tentang bagaimana sih cara membuat Countdown Timer mundur untuk Event-Event hari besar dan salah satunya adalah Hari Raya Idul Fitri ini. Fungsi ini dapat membantu sobat ketika hendak mengingatkan pengunjung pada hari atau acara event apa yang akan digelar oleh dunia atau bahkan digelar untuk diri anda dan pengunjung terdekat.

Cukup menarik bukan ?

Seperti apakah cara membuatnya ?

Simak ulasan dibawah ini untuk mengetahuinya secara lengkap,

 

Countdown Timer – Anda dapat membuat fungsi ini kedalam website atau blog anda sebagai pengingat ketika akan menjumpai sebuah event penting yang tidak boleh sobat lewatkan bersama para pengunjung yang lainnya. Salah satu kegunaannya tidak lain dan tidak bukan sebagai media pemberi informasi kepada umum tentang hal satu ini, dan informasi ini dapat kita pasang pada website atau blog kita. Sehingga pengunjung dapat melihat pengumuman dan event dari anda secara grafis dan tentunya lebih menarik. Ketika waktu sudah menunjukan pada saat yang sudah sobat tentukan, maka pengunjung akan mengerti event dan acara apa yang akan dijalankan.

Oke langsung saja yah sobat, caranya cukup mudah kok.

 

Membuat Countdown Timer

  • Pertama, Sobat masuk ke blog sobat.
  • Kedua, Lalu klik “Layout” lalu pilih “Add Widget” kemudian pilih “HTML/Javascript”
  • Ketiga, sobat copy Script dibawah ini :
<style scoped="scoped" type="text/css">
#JCFTCountDown {
 background: url('Link_Gambar_Kalian_Untuk_Dijadikan_Background_Count');
 background-size:cover;
    color:#FFC200;
    font-size:130%;
    text-transform:uppercase;
    text-align:center;
    padding:20px 0;
    font-weight:normal;
    border-radius:5px;
    line-height:1.8em;
    font-family:Trebuchet MS, Verdana, Arial, sans-serif;
}
.digit {color:white}
.judul {color:white}
.teks {color:white}
.teks2 {color:lime}
</style>
<div id="JCFTCountDown">
<span id="countdown"></span>
</div>
<script type="text/javascript">
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("June 25, 2017").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value

  countdown.innerHTML = 
  "<span class='teks'><br><br><br><br><b><h1>Even-Event_Sobat</b></h1><br><br></span> " +
  days + "<span class='teks2'>&nbsp &nbsp <font color='white' size='6px'>:</font> &nbsp &nbsp</span> " + 
  hours + " <span class='teks2'>&nbsp &nbsp <font color='white' size='6px'>:</font> &nbsp &nbsp</span> " +
  minutes + " <span class='teks2'>&nbsp &nbsp <font color='white' size='6px'>:</font> &nbsp &nbsp</span> " + 
  seconds + " <span class='teks2'>&nbsp &nbsp &nbsp<br></span>" +
  " <span class='teks2'><b>Days</b> &nbsp </span> " + 
  " <span class='teks2'><b>Hours</b> &nbsp</span> " +
  " <span class='teks2'><b>Minutes</b> &nbsp</span> " + 
  " <span class='teks2'><b>Seconds</b></span> ";
}, 1000);
//]]>
</script>

Keterangan
Hal yang perlu untuk diedit adalah :

  1. Link Gambar untuk dijadikan Background
  2. Teks untuk warna Event kalian dan teks2 untuk warna keterangan waktunya, untuk angka waktu sudah default menjadi kuning tua.
  3. (Bulan Tanggal, Tahun) bisa sobat isi sesuai waktu event yang sobat inginkan.
  4. Nama Event sobat.

 

Bagaimana ?
Cukup mudah bukan ?

Apakah cara ini membuat widget yang baru saja sobat buat yaitu ” Countdown Timer Event ” sobat tampak di semua halaman blog sobat ?

Jangan khawatir ada cara untuk mengatasinya

Baca Selengkapnya : Cara Menjadikan Widget Tampil Di Tempat Tertentu

 

 

Itulah beberapa cara yang dapat saya bagikan kepada sobat semua.
Apabila sobat merasa terbantu, sobat bisa share ke teman-teman sobat agar mereka semua tahu.
Untuk dapat terus mengikuti tips, trik dan tutorial dari saya. Cukup subscribe menggunakan email kalian maka otomatis kami akan memberitahukan ke email sobat apabila ada yang terbaru dari kami.
Sekian dan terimakasih.

PERLU DIKETAHUI


Iklan yang tampil pada halaman situs ini sepenuhnya sudah diatur oleh Pihak Google, kami hanya menyediakan tempat kosong khusus untuk iklan dari Google. Maka, apabila ada iklan yang dirasa kurang baik bagi anda sehingga tidak seharusnya ditampilkan, harap segera menginformasikan hal tersebut kepada kami dengan melalui Formulir Kontak yang ada di bagian bawah sendiri pada situs ini.

Kemudian, kami akan segera menyampaikan pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :
  • Nama Iklan
  • Alamat Screenshoot(Gambar) Iklan


About the Author:

CEO & Founder JOKAM INFORMATIKA [OFFICIAL]

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.