Mungkin ada suatu hari atau peristiwa yang sangat ditunggu-tunggu kehadirannya, contoh seperti Tahun Baru, Hari Raya Idul Fitri, Hari Raya Natal, Hari Raya Idul Adha, dan sebagainya. Seseorang tidak mau peristiwa tersebut terlewatkan dalam hidupnya, maka dari itu ada sebuah alat yang bernama Countdown Timer. Alat ini mungkin mirip seperti alarm. Namun, bagaimana jika alat tersebut dipasang pada sebuah blog? Ya, kali ini saya akan menjelaskan caranya kepada Anda tentang Cara Membuat Widget Countdown Timer di Blog. Baiklah, langsung saja kita simak caranya berikut ini.
1. Masuk ke blog Anda.
2. Klik Menu Layout pada sidebar kiri.
3. Klik Add a Gadget dimana saja.
4. Scroll kebawah hingga menemukan HTML/Javascript kemudian klik tanda + disamping kanannya.
5. Ubah Judul widgetnya sesuai keinginan Anda. Kemudian, pada content paste-kan kode berikut ini
<style type="text/css">
#box {
background-color:#CD5A27;
color:#FFC200;
font-size:130%;
text-transform:uppercase;
text-align:center;
padding:20px 0;
border-radius:5px;
line-height:1.8em;
font-family:Cursive, Verdana, Arial, sans-serif;
}
.digit {
color:white;
}
.judul {
color:blue;
font-weight:bold;
}
</style>
<div id="box">
<span id="countdown"></span>
</div>
<script type="text/javascript">
//<![CDATA[
var target_date = new Date("Jan 1, 2015").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 menuju</span> <span class=\'judul\'>Tahun Baru</span>";
}, 1000);
//]]>
</script>
6. Klik
Save.
7. Klik
Save arrangement dan lihat hasilnya pada blog Anda.
Catatan:
- Warna widgetnya bisa dirubah dengan warna lain pada tulisan yang berwarna merah.
- Tanggal bisa dirubah pada tulisan yang berwarna orange
- Judul bisa dirubah pada tulisan yang berwarna hijau
- Jenis tulisan bisa dirubah pada tulisan yang berwarna biru
- Jika Anda sudah paham dengan CSS, maka Anda bisa menambah stylenya sesuai keinginan Anda
- Butuh bantuan dengan warna? Kunjungi Hasbi Color Generator
