Subscribe to our RSS Feeds

Trik Membuat Widget Kalender Menggunakan jQuery di Blogger

0 Comments »

Hmmm…. karena udah lama gak bikin tutorial tentang Blogger, kali ini saya akan memberikan sedikit trik dan tips cara membuat widget kalender di sidebar blog anda menggunakan JQuery di Blogger. Kenapa pakai jQuery? Kenapa gak pakai Javascript dan css aja. Jawabannya simpel, tampilannya KEREN broo…. icon smile Trik Membuat Widget Kalender Menggunakan jQuery di Blogger
Screenshot 1 Trik Membuat Widget Kalender Menggunakan jQuery di Blogger

Langkah pertama,
Copy dan paste kode berikut ini tepat dibawah script <head>.

Langkah kedua,
Cari kode <div id=’sidebar-wrapper’>, dan tambahkan script dibawah ini tepat dibawahnya.
<table>
 <tr>
 <td id="mon1"></td>
 </tr>
<script>//<![CDATA[

// initial dates

var now = new Date();

var prev = new Date(); prev.setMonth(prev.getMonth() - 1);

var next = new Date(); next.setMonth(next.getMonth() + 1);
// create the calendars

var cal1 = Calendar.setup({ cont: "mon1", date: prev });

var cal2 = Calendar.setup({ cont: "mon2", date: now });

var cal3 = Calendar.setup({ cont: "mon3", date: next });
// this hack is necessary to prevent infinite recursion

var updating = false;
// next, assign some onChange handlers to each calendar; when

// the month/year is changed, update the other calendars

// accordingly.
cal1.addEventListener("onChange", function(cal, date, anim) {

if (!updating) {

updating = true;

date = new Date(date);

date.setMonth(date.getMonth() + 1);

cal2.moveTo(date, anim);

date = new Date(date);

date.setMonth(date.getMonth() + 1);

cal3.moveTo(date, anim);

updating = false;

}

});
cal2.addEventListener("onChange", function(cal, date, anim) {

if (!updating) {

updating = true;

date = new Date(date);

date.setMonth(date.getMonth() - 1);

cal1.moveTo(date, anim);

date = new Date(date);

date.setMonth(date.getMonth() + 2);

cal3.moveTo(date, anim);

updating = false;

}

});
cal3.addEventListener("onChange", function(cal, date, anim) {

if (!updating) {

updating = true;

date = new Date(date);

date.setMonth(date.getMonth() - 2);

cal1.moveTo(date, anim);

date = new Date(date);

date.setMonth(date.getMonth() + 1);

cal2.moveTo(date, anim);

updating = false;

}

});

//]]></script>
Langkah ketiga,
Klik Save Template dan lihat hasinya. Semoga berhasil…. icon biggrin Trik Membuat Widget Kalender Menggunakan jQuery di Blogger
05.58

0 Responses to "Trik Membuat Widget Kalender Menggunakan jQuery di Blogger"

Posting Komentar