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…. 
Langkah pertama,
Copy dan paste kode berikut ini tepat dibawah script <head>.
</table><script src=”http://dl.dropbox.com/u/19924210/Duniainternet/setting/aCalendar/src/js/jscal2.js”></script> <script src=”http://dl.dropbox.com/u/19924210/Duniainternet/setting/aCalendar/src/js/lang/en.js”></script> <link rel=”stylesheet” type=”text/css” href=”http://dl.dropbox.com/u/19924210/Duniainternet/setting/aCalendar/src/css/jscal2.css” /> <link rel=”stylesheet” type=”text/css” href=”http://dl.dropbox.com/u/19924210/Duniainternet/setting/aCalendar/src/css/border-radius.css” /> <link rel=”stylesheet” type=”text/css” href=”http://dl.dropbox.com/u/19924210/Duniainternet/setting/aCalendar/src/css/steel/steel.css” />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….
Tidak ada komentar:
Posting Komentar