Cara Membuat Widget Hitung Mundur Tahun Baru 2016

BidikSEO - Tahun baru 2016 kian dekat, tinggal beberapa hari saja. Kali ini BidikSEO akan memberitahu tentang bagaimana cara membuat widget countdown atau hitung mundur tahun baru 2016 di blog. caranya pun mudah dan gampang banget .

Langsung saja ke tutorialnya

Tutorial Membuat Widget Countdown Tahun Baru 2016 di Blog

1. Pertama, masuk ke Dashboard Blogger masing-masing.
2. Kedua, Pilih Layout / Tata Letak . perhatikan gambar :

 3. Setelah itu, akan tampak seperti gambar dibawah ini. tinggal add a gadget/ tambahkan gadget nanti akan muncul pop up , Pilih HTML/Javascript .

4. Langkah selanjutnya, copy paste kode di bawah ini. 2x klik untuk Copas .

CSS<style type="text/css" scoped="scoped">
#tahunbaru2016 {background:orange;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="tahunbaru2016">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Jan 1, 2016").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 Tahun</span> 2016";

}, 1000);
//]]>
</script>

dan pastekan di kolom seperti di gambar.

5. Langkah terakhir , Save atau Simpan

untuk hasilnya seperti gambar di bawah ini...

Sekian jangan lupa telusuri widget widget yang lain.

Artikel Terkait

Cara Membuat Widget Hitung Mundur Tahun Baru 2016

4/ 5

Oleh Unknown

Unknown 12/26/2015 12 Komentar