Memasang Widget Kalender Pada Blog

Ada banyak sekali widget yang bisa kita aplikasikan pada blog. Salah satunya widget kalender yang tutorialnya akan saya bagikan pada postingan saya kali ini. Widget ini tampilannya sangat sederhana, seperti kelender rumahan yang motifnnya kotak-kotak, dan tentunya tanpa background wanita-wanita seksi. Untuk pemasangannya pun relatif mudah, tidak membutuhkan edit template yang rumit.

Widget Kalender Blogger

Tampilannya memang sederhana, namun Anda bisa memodifikasinya melalui kode CSS yang sudah terintegrasi pada widget kalender ini. Tertarik untuk mencoba? Berikut tutorialnya.

Menambahkan Widget Kalender Ke Blogger

Log in ke Blogger.com™ » Tata Letak » Tambahkan Gadget » HTML/JavaScript. Salin kemudian tempel kode berikut ada formulir HTML/JavaScript.

<style type="text/css">
.month {
 background-color:black;
 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">

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* Via http://bloggerstop.net
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function buildCal(m, y, cM, cH, cDW, cD, brdr) {
    var mn = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var dim = [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var oD = new Date(y, m - 1, 1); //DD replaced line to fix date bug when current day is 31st
    oD.od = oD.getDay() + 1; //DD replaced line to fix date bug when current day is 31st
    var todaydate = new Date() //DD added
    var scanfortoday = (y == todaydate.getFullYear() && m == todaydate.getMonth() + 1) ? todaydate.getDate() : 0 //DD added
    dim[1] = (((oD.getFullYear() % 100 != 0) && (oD.getFullYear() % 4 == 0)) || (oD.getFullYear() % 400 == 0)) ? 29 : 28;
    var t = '<div class="' + cM + '"><table class="' + cM + '" cols="7" cellpadding="0" border="' + brdr + '" cellspacing="0"><tr align="center">';
    t += '<td colspan="7" align="center" class="' + cH + '">' + mn[m - 1] + ' - ' + y + '</td></tr><tr align="center">';
    for (s = 0; s < 7; s++) t += '<td class="' + cDW + '">' + "SMTWTFS".substr(s, 1) + '</td>';
    t += '</tr><tr align="center">';
    for (i = 1; i <= 42; i++) {
        var x = ((i - oD.od >= 0) && (i - oD.od < dim[m - 1])) ? i - oD.od + 1 : '&nbsp;';
        if (x == scanfortoday) //DD added
        x = '<span id="today">' + x + '</span>' //DD added
        t += '<td class="' + cD + '">' + x + '</td>';
        if (((i) % 7 == 0) && (i < 36)) t += '</tr><tr align="center">';
    }
    return t += '</tr></table></div>';
}
</script>
<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>

Pengaturan Lanjut

Untuk memodifikasi tampilan widget kalender ini, seperti warna background, jenis font, dan lain-lain, Anda bisa memulainya melalui kode CSS berikut.

.month {
 background-color:black;
 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;
}

—ς∞ς—

Tweet

Postingan terkait:

Ditulis EM — Sunday, 19 May 2013 — Add Comment — Blogger Widgets