Dashboard

Menunggu hari-hari yang spesial pasti sangat membosankan. Apalagi kalau kita sampai lupa hari tersebut, wah bisa gawat tuh.
Karena itu, kita harus membuat sebuah catatan pengingat supaya tidak lupa dengan hari spesial tersebut, kalau perlu buat sebuah timer mundur (count down) agar kita bisa tepat waktu!
Oleh karena itu, kita akan mencoba untuk memasang timer mundur pada blog kita. Mungkin sebagian sudah pernah memasang gadget semacam ini dalam bentuk flash, tapi perlu kita ketahui bahwa flash di blog dapat memperlambat waktu reload blog kita.
Memang sih tampilan gadget-gadget flash sangatlah menarik dan atraktif, tapi para Blogger yang memperhatikan kecepatan blog tentunya akan menghindari pemasangan flash di blognya.
Okay langsung ke caranya aja ea!

• Masuk ke Tata Letak -> Edit HTML
• Copy kode di bawah ini! Paste diatas </head>

<script language="javascript">
<!-- Countdown in Java Script .. Cameron Gregory http://www.bloke.com/
// permission to use and modify as long as you leave these 4 comment
// lines in tact and unmodified.
// http://www.bloke.com/javascript/Countdown/
speed=1000;
len=40;
tid = 0;
num=0;
clockA = new Array();
timeA = new Array();
formatA = new Array();
dd = new Date();
var d,x;

function doDate(x)
{
for (i=0;i<num;i++) {
dt = new Date();

if (timeA[i] != 0) {
v1 = Math.round(( timeA[i] - dt )/1000) ;
if (v1 < 0)
clockA[i].date.value = "**BANG!**";
if (formatA[i] == 1)
clockA[i].date.value = v1;
else if (formatA[i] ==2) {
sec = v1%60;
v1 = Math.floor( v1/60);
min = v1 %60 ;
hour = Math.floor(v1 / 60);
if (sec < 10 ) sec = "0"+sec;
if (min < 10 ) min = "0"+min;
clockA[i].date.value = hour+"h "+min+"m "+sec+"s";
}
else if (formatA[i] ==3) {
sec = v1%60;
v1 = Math.floor( v1/60);
min = v1 %60 ;
v1 = Math.floor(v1 / 60);
hour = v1 %24 ;
day = Math.floor(v1 / 24);
if (sec < 10 ) sec = "0"+sec;
if (min < 10 ) min = "0"+min;
if (hour < 10 ) hour = "0"+hour;
clockA[i].date.value = day+"d "+hour+"h "+min+"m "+sec+"s";
}
else if (formatA[i] ==4 ) {
sec = v1%60;
v1 = Math.floor( v1/60);
min = v1 %60 ;
v1 = Math.floor(v1 / 60);
hour = v1 %24 ;
day = Math.floor(v1 / 24);
clockA[i].date.value = day+(day==1?" hari ":" hari ")+hour+(hour==1?" jam ":" jam ")+min+(min==1?" menit ":" menit ")+sec+(sec==1?" detik ":" detik ")
}
else
clockA[i].date.value = "Invalid Format spec";
}
else
clockA[i].date.value = "Countdown till when?";
}

tid=window.setTimeout("doDate()",speed);
}

function start(d,x,format) {
clockA[num] = x
timeA[num] = new Date(d);
formatA[num] = format;
//window.alert(timeA[num]+":"+d);
if (num == 0)
tid=window.setTimeout("doDate()",speed);
num++;
}

function CountdownLong(t,format,len)
{
document.write('<FORM name=form'+num+'><input name=date size=')
document.write(len)
document.write(' value="Countdown: Requires Javascript"></FORM>')
start(t,document.forms["form"+num],format);
}

function Countdown2001seconds()
{
CountdownLong("January 01, 2001 00:00:00",1,8);
}

function Countdown2001()
{
//CountdownLong("January 01, 2000 00:00:00",3,20);
CountdownLong("January 01, 2001 00:00:00",4,30);
}

function Countdown(t)
{
CountdownLong(t,4,30);
}

// end-->
</script>

• Perhatikan kode Javascript berikut:

<script language="javascript">
// when I'll turn 100, causing my own y1c problems.
Countdown("November 01, 2010 09:00:00");
</script>

• Pada kode yang dicetak tebal, dan merah, menunjukkan tanggal waktu habis pada timer tersebut!
• Silahkan ganti sesuai keinginan, tapi ingat! Gunakan bahasa Inggris dalam penulisan Bulan!

(Bisa bahasa Inggris kan?)
Anak-anak kali ini kita akan belajar mengenal bulan dalam bahasa Inggris:

1. January
2. February
3. March
4. April
5. May
6. June
7. July
8. August
9. September
10. October
11. Desember

• Kalau sudah masukkan kode tersebut dengan menambah gadget elemen halaman pada blogmu (tahu maksudnya kan?!)
• Masuk ke Tata Letak -> Elemen Halaman -> Tambah Gadget -> HTML/Javascript
• Paste di sana lalu simpan!

Mudah kan? Walau tampilannya sederhana yang penting fungsinya sama kan?
Jangan lupa tinggalin komentar!