membuat pesan dalam hitungan mundur

Suatu peristiwa penting hingga akhirnya tiba pada puncak waktu peringatan pasti ditunggu-tunggu oleh semua orang. Biasanya hal yang paling ditunggu-tunggu yaitu waktu hingga akhirnya sampai pada puncak peringatan tahun baru itu hadir, detik demi detik kita menghitung waktu hingga akhirnya sampai pada puncak waktu. Selagi menunggu hari itu tiba, tidak ada salahnya kita memberikan pesan kepada pengunjung mengenai peristiwa penting tersebut.
Untuk Demonya bisa anda lihat dibawah ini.

Untuk membuat timer hitung mundur atau biasa disebut Countdown Timer, fungsinya tidak lain sebagai pengingat detik detik menjelang hari itu tiba.
Cara membuat widget pesan dalam hitungan mundur:

1. Masuk ke Blogger.com
2. Klik Tata Letak => Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy kode dibawah ini :
<style scoped="scoped" type="text/css">
.peristiwa{color:#FFC200;background: #603B24; font-size: 120%;
text-transform: uppercase;text-align: center;margin: 2%;padding: 1.5%;}
.digit {color:#fff}
.judul {color:#fff}
@media screen and (max-width:974px) {
.peristiwa{ margin:10px 0 0 0;}}
</style>

<div class="peristiwa">
<div id="countdown">
<script type="text/javascript">
//<![CDATA[
var target_date = new Date("Jan 01, 2016").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    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);
  countdown.innerHTML =  days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> "
  + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik</span> <span class=\'digit\'>---> Menuju</span> <span class=\'judul\'>Tahun Baru 2016</span>";  
}, 1000);
//]]>
</script></div></div>
  • Note : Silakan ganti teks berwarna merah dengan pesan yang ingin anda sampaikan, dan yang berwarna orange adalah waktu yang dituju.
 5. SIMPAN dan lihat hasilnya.

Comments

Popular posts from this blog

Contact Form diHalaman Statis

Membuat Profil Blogger keren Seperti Google+

Mengapa harus ngeblog dari sekarang