Cara Membuat Kalender Sederhana di Blog

Beberapa kawan-kawan blogger berpendapat kalender merupakan hal penting, karena ini sangat membantu untuk publikasi sebuah kegiatan. Terutama untuk blog entertainment, kalender merupakan sebuah penayangan jadwal kegiatan. Lalu bagaimana dengan blog biasa, itu tergantung dengan pemilik blognya sendiri untuk memanfaatkan kalendar tersebut. Ok gan saya langsung saja menerangkan cara pembuatannya.
Log in ke blog anda
Klik Rancangan

Klik Edit HTML

Masukkan kode berikut di atas kode </head>
Untuk mempermudah pencarian pergunakan Control+F atau F3 lalu masukkan </head>

<style type="text/css">
.month {
background-color:transparent;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/basiccalendar.js">
</script>

Simpan template

Selanjutnya Klik lagi Rancangan

Klik Tambah Gadget

Pilih HTML/JavaScript

Masukkan kode berikut ke dalamnya lalu simpan template

<center><script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script></center>

untuk contoh kalender kedua  berikut kodenya. Silahkan anda pilih sendiri mau yang mana.

<center><form>
<select onChange="updatecalendar(this.options)">
<script type="text/javascript">
var themonths=['January','February','March','April','May','June',
'July','August','September','October','November','December']
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
function updatecalendar(theselection){
var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)
if (document.getElementById)
document.getElementById("calendarspace").innerHTML=calendarstr
}
document.write('<option value="'+(curmonth-1)+'" selected="yes">Current Month</option>')
for (i=0; i<12; i++) //display option for 12 months of the year
document.write('<option value="'+i+'">'+themonths[i]+' '+curyear+'</option>')
</script>
</select>
<div id="calendarspace">
<script>
//write out current month's calendar to start
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 0))
</script>
</div>
</form></center>

Selanjutnya Simpan Template dan lihat hasilnya
Selamat Mencoba dan sukses selalu