Cara Mudah Membuat Countdown Timer Pada Website Blog

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 tovar target_date = new Date("June 25, 2017").getTime();// variables for time unitsvar days, hours, minutes, seconds;// get tag elementvar countdown = document.getElementById("countdown");// update the tag with id "countdown" every 1 secondsetInterval(function () {// find the amount of "seconds" between now and targetvar current_date = new Date().getTime();var seconds_left = (target_date - current_date) / 1000;// do some time calculationsdays = 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.