Thursday, January 25, 2018

Cara Membuat Countdown Timer Di Blog

Cara Membuat Countdown Timer Di Blog




Cara Membuat Countdown Timer Di Blog - JOKAM INFORMATIKA

Disini saya membahas tentang bagaimana sih membuat Countdown Timer mundur untuk Event-Event hari besar dan salah satunya adalah Hari Raya Idul Fitri ini..

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.

oke langsung saja yah sobat, caranya cukup mudah kok.

Caranya :

  • 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 event sobat.
  4. Nama Event sobat.



Bagaimana ?
cukup mudah bukan ?

Apakah cara ini membuat widget sobat yang baru saja sobat buat yaitu Event sobat tampak di semua halaman blog sobat?
jangan khawatir ada cara untuk mengatasinya



Baca : 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 menyampaikannya pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :
  • Nama Iklan
  • Alamat Screenshoot(Gambar) Iklan


Load Disqus Comments Hide Disqus Comments