Cara Membuat Kalender (Datepicker) Blog

Cara membuat widget kalender pada website atau blog yang dibahas pada posting ini adalah widget kalender dibuat menggunakan JQuery (UI/API/1.8/Datepicker).

Kalender (datepicker) Website/Blog

Cara mendapatkan widget kalender untuk di pasang pada Website atau Blog dapat ditempuh dengan dua cara yaitu: Cara pertama untuk memasang widget kalender adalah kodenya ditempatkan pada dua lokasi yaitu dalam template blog dan gadget HTML/JavaScript. Langkah-langkah sebagai berikut, yaitu:
1. Sign in di blog
2. Klick Rancangan
3. Klick Edit HTML
4. Cari kode </head> dalam kode template blog anda. Untuk mudah menemukannya

• Gunakan Ctrl F
• Masukan teks </head> dalam teks boks yang muncul pada bagian bawah kiri layar komputer/laptop yang digunakan.
• Enter. Apabila kodenya ditemukan dan cocok akan ditampilkan dengan latar hijau, sedangkan apabila kodenya tidak cocok teks box akan berwarna merah muda.

5. Tempatkan kode di bawah ini di atas atau sebelum kode </head> Ini kodenya: <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#datepicker").datepicker(); }); </script>
6. Klick Simpan untuk menyimpan perubahan
7. Klick Rancangan lagi
8. Klick Add gadget
9. Pilih HTML/JavaScript
10. Copy lalu paste kode dibawah ini dalam gadget HTML/JavaScript yang baru ditambahkan <div id="datepicker"> </div>
11. Klick Simpan untuk menyimpan perubahan

Setelah melakukan langkah-langkah di atas klick Lihat untuk melihat hasilnya.

Sedangkan cara kedua tanpa melalui kode template blog atau cukup dipasang pada gadget HTML/JavaScript saja. Setelah mendapatkan gadget HTML/JavaScript ikuti langkah-langkah berikut ini, yaitu:

• Copy lalu paste kode di bawah ini dalam gadget HTML/JavaScript yang ditambahkan tadi
• Klick Simpan untuk menyimpan perubahan

Ini kodenya:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>     <script>   $(document).ready(function() {     $("#datepicker").datepicker();   });  </script> <div id="datepicker"> </div>

Setelah melakukan langkah-langkah di atas klick Lihat untuk melihat hasilnya. (248 Blog).

Referensi: JQuery.com