Para sobat sekalian mungkin perna menjumpai blog ataupun web yang memiliki tampilan gadget unik berupa tanggal ataupun jam, nah pasti sahabat sekalian bertanya-tanya bagaimana sebetulnya memberikan tampilan seperti itu di blog anda, kali ini saya akan memberikan java script untuk dapat menampilkan gadget tersebut.
Kalendar Dasar
<html>
<title> Kalender Dasar </title>
<head>
<style type="text/css">
/* CSS untuk tabel kalender*/
.main {
width:180px;
border:1px solid black;
}
/* CSS untuk tabel bulan*/
.bulan {
background-color:black;
font:bold 12px verdana;
color:white;
}
/* CSS untuk tabel minggu*/
.minggu{
background-color:gray;
font:bold 12px verdana;
color:white;
}
/* CSS untuk tabel hari*/
.hari {
font-size: 12px;
font-family:verdana;
color:white;
background-color: black;
padding: 2px;
}
/* CSS untuk tabel hari ini*/
.hari #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript">
// Fungsi membuat Kalender
function membuatKalender(bulan, tahun, bulan2, bulan1, hari1, hari, border){
// membuat nama bulan
var namabulan=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
// angka tanggal akir jumlahnya tanggal tiap bulan
var angkatanggal=[31,0,31,30,31,30,31,31,30,31,30,31];
//DD untuk hari menempatkan baris untuk menyesuaikan tanggal
var mengkonfigurasiKalender = new Date(tahun, bulan-1, 1);
mengkonfigurasiKalender.od=mengkonfigurasiKalender.getDay()+1;
//DD untuk hari ini ditambahkan
var tanggalhariini=new Date()
var tanggal=(tahun==tanggalhariini.getFullYear() && bulan==tanggalhariini.getMonth()+1)? tanggalhariini.getDate() : 0
//DD untuk tanggal ditambahkan
angkatanggal[1]=(((mengkonfigurasiKalender.getFullYear()%100!=0)&&(mengkonfigurasiKalender.getFullYear()%4==0))||(mengkonfigurasiKalender.getFullYear()%400==0))?29:28;
// menampilkan tanggal dalam tabel
var t='<div class="'+bulan2+'"><table class="'+bulan2+'" cols="7" cellpadding="0" border="'+border+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+bulan1+'">'+namabulan[bulan-1]+' - '+tahun+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+hari1+'">'+"MSSRKJS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-mengkonfigurasiKalender.od>=0)&&(i-mengkonfigurasiKalender.od<angkatanggal[bulan-1]))? i-mengkonfigurasiKalender.od+1 : ' ';
//DD untuk tanggal ditambahkan
if (x==tanggal)
//DD untuk tanggal ditambahkan
x='<span id="today">'+x+'</span>'
t+='<td class="'+hari+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}
</script>
</head>
<script type="text/javascript">
// mendeklarasikan tanggal dan hari
var tanggalhariini=new Date()
//untuk mendapatkan bulan(1-12)
var bulan1=tanggalhariini.getMonth()+1
//menunjukkan tahun
var tahun1=tanggalhariini.getFullYear()
document.write(membuatKalender(bulan1 ,tahun1, "main", "bulan", "minggu", "hari", 1));
</script>
</body>
</html>
setelah itu buka blog anda kemudian kemudia masuk di pengaturan tata letak, kemudian pilih tambah gadget, Setelah selesai pilih html/javascript kemudian copy java scrit di atas masuk ke dalam kolom yang telah tersedia.
