Cara Memasang Widget Hitung Mundur Menuju Bulan Ramadhan

mayuf tutorial blogger

ALFA ARTS - Ramadhan sebentar lagi, bagi seluruh umat muslim tentunya bulan ini sangat diagungkan dan disucikan, nah bagi para blogger kita bisa ikut mengucapkanya melalui widget pada blog kita. nah untuk itu kali ini Alfa Arts akan memberikan sebuha tutorial singkat mengenai cara memasang widget menghitung mundur hari menuju bulan rhamadan. widget ini selain bisa sebagai penghias blog juga dapat digunakan sebagai pengingat bagi para pembaca blog kita (itung itung mengingatkan, karena mengingatkan itu juga ibadah lho hehee).

Widget ini berfungsi untuk menampilkan waktu mundur ke hari yang sudah kita tentukan, karena disini mendekati ramadhan jadi kita akan setting menuju hari ramadhan. Nah untuk tutorialnya langsung saja kita bahas bersama sama dibawah ini.

Cara Memasang Widget Hitung Mundur Menuju Bulan Ramadhan

Cara memasnag widget ini sangatlah mudah dan simple, seperti halnya memasang widget lainya, namun bagi sobat semua yang belum mengetahuinya akan saya jelaskan secara jelas dan singkat. dan untuk hasilnya nanti bisa dilihat pada gambar dibawah ini.

Widget Ramadhan

Buka blogger sobat seperti biasa.
Masuk ke tata letak, dan pilih tambah gedget, lihat gambar dibawah ini.
Pilih HTML/Java Script.

Copykan script dibawah ini ke form tersebut.

<style type="text/css" scoped="scoped">
#bulanramadhan2016 {background:#007FFF;color:#1C39BB;font-family:'Roboto', Arial, Sans-serif;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
  .teks {color:white}
</style>
<div id="bulanramadhan2016">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("May 27, 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 bulan suci ramadhan </span> 1438 H/2017";
}, 1000);
//]]>
</script>

Ganti Text warna merah menjadi tanggal yang diinginkan, hijau untuk background dan biru untuk warna text yang dinginkan.
Klik simpan, dan lihat hasilnya di blog sobat.

Nah bagaimana keren dan mudah bukan? bagi yang masih ada error atau ada yang ingin ditanyakan bisa komen dibawah, atau hubungi admin di sosmed yang tersedia. dan jangan lupa untuk memperbanyak ibadah dibulan Ramadhan ini semoga menjadi Ramadhan yang lebih baik dari tahun sebelumnya.

NB jika ada link not found, beritahu admin dengan berkomentar