Cara Membuat Countdown Timer Di Blog

Cara Membuat Countdown Timer Di Blog

Hai Sobat,

Berjumpa lagi ya..

sekarang kan akan berjalannya bulan yang sangat suci yaitu bulan Ramadhan hehe..

siapa yang puasanya bolong-bolong hayoo gausah ngaku di komentar yah soalnya nanti malu soalnya wkwkw..

disini saya tidak membahas dosa tidak berpuasa yah.

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

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 :
Edit yang berwarna Hijau terserah kalian,

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.

TERIMAKASIH