Tak terasa sedikit lagi kita akan bertemu dengan hari raya idul fitri, dimana semua orang akan bermaaf-maafkan sesama umat manusia. Kali ini saya akan membagikan tutorial cara membuat widget hitung mundur idul fitri 1438 H/2017 M.

Dengan Anda memasang widget ini, Anda bisa tahu kapan dan berapa hari lagi hari raya idul fitri ini akan tiba. Widget ini sudah di edit sedikit oleh blog yang membuat widget ini yaitu Reboza Sambirejo. Saya mendapatkan tutorial ini di blog beliau.

Untuk pemasangan widget ini tidak sesulit yang Anda pikirkan, karna widget ini di terapkan pada widget, jadi penerapannya lewat Tata letak bukan HTML, jadi tinggal terapkan dan save.

Cara Membuat Countdown Timer Idul Fitri 1438 H/2017 M


Langkah pertama :

Login ke Blogger > Tata Letak > Tambahkan Widget. Lalu Anda pilih HTML/Javascript, dan Copy kode dibawah ini kedalam widget tersebut.

<style type="text/css" scoped="scoped">

#idulfitri2017 {background:black;color:#5CAAFF;font-family:Oswald , Arial, Sans-serif;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}

  .teks {color:white}

</style>

<div id="idulfitri2017">

<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 = days + " <span class=\'teks\'>hari</span> " + hours + " <span class=\'teks\'>jam</span> "
  + minutes + " <span class=\'teks\'>menit</span> " + seconds + " <span class=\'teks\'>detik menuju hari raya Idul Fitri </span> 1438 H/2017 M";

}, 1000);

//]]>

</script>

Selanjutnya tinggal Anda Save widget Anda, dan nantinya widget ini akan muncul di mana tempat Anda memasangkan widget ini.

Sumber : Reboza Sambirejo