Memasang Widget Kalender Hijriah & Masehi di Blogger

Sesuai dengan judul di atas, yaitu memasang widget kalender hijriah & masehi dengan menggunakan bahasa pemograman javascript. Menampilkan hari & tanggal pada blog sangat mudah karena tinggal copy script-nya, dan paste untuk menempatkan dimana anda suka.

Berikut script Widget Kalender :

1. Widget Kalender Hijriyah - Masehi Script code : <div id="cal-2"> <input id="date-2" type="text" /> <button class="icon-button" onclick="showCal2();">▦</button> </div> <div id="cal-1"> <input id="date-1" type="text" /> <button class="icon-button" onclick="showCal1();">▦</button> </div> <script src="https://ZulNs.github.io/libs/calendar.js"></script> <script src="https://ZulNs.github.io/libs/hijri-date.js"></script> <script> var cal1 = new Calendar(), cal2 = new Calendar(true, 0, false, true), date1 = document.getElementById('date-1'), date2 = document.getElementById('date-2'), cal1Mode = cal1.isHijriMode(), cal2Mode = cal2.isHijriMode(); document.getElementById('cal-1').appendChild(cal1.getElement()); document.getElementById('cal-2').appendChild(cal2.getElement()); cal1.show(); cal2.show(); setDateFields(); cal1.callback = function() { if (cal1Mode !== cal1.isHijriMode()) { cal2.disableCallback(true); cal2.changeDateMode(); cal2.disableCallback(false); cal1Mode = cal1.isHijriMode(); cal2Mode = cal2.isHijriMode(); } else cal2.setTime(cal1.getTime()); setDateFields(); }; cal2.callback = function() { if (cal2Mode !== cal2.isHijriMode()) { cal1.disableCallback(true); cal1.changeDateMode(); cal1.disableCallback(false); cal1Mode = cal1.isHijriMode(); cal2Mode = cal2.isHijriMode(); } else cal1.setTime(cal2.getTime()); setDateFields(); }; function setDateFields() { date1.value = cal1.getDate().getDateString(); date2.value = cal2.getDate().getDateString(); } function showCal1() { if (cal1.isHidden()) cal1.show(); else cal1.hide(); } function showCal2() { if (cal2.isHidden()) cal2.show(); else cal2.hide(); } //# sourceURL=pen.js </script> <link rel="stylesheet prefetch" href="https://ZulNs.github.io/libs/calendar.css"> <style class="cp-pen-styles"> #cal-1, #cal-2 { margin-left: 12px; margin-top: 10px; } .icon-button { width: 30px; } input { width: 243px; margin-bottom: 8px; } </style>
2. Widget Text Kalender Hijriah & Masehi Script code : <script type="text/javascript"> var fixd; function isGregLeapYear(year) { return year%4 == 0 && year%100 != 0 || year%400 == 0; } function gregToFixed(year, month, day) { var a = Math.floor((year - 1) / 4); var b = Math.floor((year - 1) / 100); var c = Math.floor((year - 1) / 400); var d = Math.floor((367 * month - 362) / 12); if (month <= 2) e = 0; else if (month > 2 && isGregLeapYear(year)) e = -1; else e = -2; return 1 - 1 + 365 * (year - 1) + a - b + c + d + e + day; } function Hijri(year, month, day) { this.year = year; this.month = month; this.day = day; this.toFixed = hijriToFixed; this.toString = hijriToString; } function hijriToFixed() { return this.day + Math.ceil(29.5 * (this.month - 1)) + (this.year - 1) * 354 + Math.floor((3 + 11 * this.year) / 30) + 227015 - 1; } function hijriToString() { var months = new Array("Muharram","Safar","Rabiul Awal","Rabiul Tsani","Jumadil Ula","Jumadil Tsani","Rajab","Sya\'ban","Ramadhan","Syawwal","Dzul Qa\'dah","Dzul Hijjah"); return this.day + " " + months[this.month -1]+ " " + this.year; } function fixedToHijri(f) { var i=new Hijri(1100, 1, 1); i.year = Math.floor((30 * (f - 227015) + 10646) / 10631); var i2=new Hijri(i.year, 1, 1); var m = Math.ceil((f - 29 - i2.toFixed()) / 29.5) + 1; i.month = Math.min(m, 12); i2.year = i.year; i2.month = i.month; i2.day = 1; i.day = f - i2.toFixed() + 1; return i; } var tod=new Date(); var weekday=new Array("Ahad","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"); var monthname=new Array("Desember","Januari","Februari","Maret","April","Mei"," Juni","Juli","Agustus","September","Oktober","November"); var y = tod.getFullYear(); var m = tod.getMonth(); var d = tod.getDate(); var dow = tod.getDay(); document.write(weekday[dow] + ", "); m++; fixd=gregToFixed(y, m, d); var ngnet=new Hijri(1421, 11, 28); ngnet = fixedToHijri(fixd); document.write(" " + ngnet.toString() + " H "); document.write("/" + " " + d + " " + monthname[m] + " " + y + " M"); </script>
3. Widget Text Kalender Masehi & Hijriah Script code : <script type="text/javascript"> var fixd; function isGregLeapYear(year) { return year%4 == 0 && year%100 != 0 || year%400 == 0; } function gregToFixed(year, month, day) { var a = Math.floor((year - 1) / 4); var b = Math.floor((year - 1) / 100); var c = Math.floor((year - 1) / 400); var d = Math.floor((367 * month - 362) / 12); if (month <= 2) e = 0; else if (month > 2 && isGregLeapYear(year)) e = -1; else e = -2; return 1 - 1 + 365 * (year - 1) + a - b + c + d + e + day; } function Hijri(year, month, day) { this.year = year; this.month = month; this.day = day; this.toFixed = hijriToFixed; this.toString = hijriToString; } function hijriToFixed() { return this.day + Math.ceil(29.5 * (this.month - 1)) + (this.year - 1) * 354 + Math.floor((3 + 11 * this.year) / 30) + 227015 - 1; } function hijriToString() { var months = new Array("Muharram","Safar","Rabiul Awal","Rabiul Tsani","Jumadil Ula","Jumadil Tsani","Rajab","Sya\'ban","Ramadhan","Syawwal","Dzul Qa\'dah","Dzul Hijjah"); return this.day + " " + months[this.month -1]+ " " + this.year; } function fixedToHijri(f) { var i=new Hijri(1100, 1, 1); i.year = Math.floor((30 * (f - 227015) + 10646) / 10631); var i2=new Hijri(i.year, 1, 1); var m = Math.ceil((f - 29 - i2.toFixed()) / 29.5) + 1; i.month = Math.min(m, 12); i2.year = i.year; i2.month = i.month; i2.day = 1; i.day = f - i2.toFixed() + 1; return i; } var tod=new Date(); var weekday=new Array("Ahad","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"); var monthname=new Array("Januari","Februari","Maret","April","Mei"," Juni","Juli","Agustus","September","Oktober","November","Desember"); var y = tod.getFullYear(); var m = tod.getMonth(); var d = tod.getDate(); var dow = tod.getDay(); document.write(weekday[dow] + ", " + d + " " + monthname[m] + " " + y); m++; fixd=gregToFixed(y, m, d); var h=new Hijri(1421, 11, 28); h = fixedToHijri(fixd); document.write(" M / " + h.toString() + " H   "); </script>

Jika anda ingin merubah jenis font, warna font dan lain-lainnya anda bisa mengeditnya dulu dengan menambahkan tag style. Contoh, <div style="color: red; font-size: 17px;"> script disini </div> setelah selesai edit anda bisa klik preview untuk melihat hasilnya, klik & copy. Contoh pemasangan/penempatan, Masuk ke bloger klik > Tata Letak > Tambahkan Widget > HTML/Javascript > Konten > Paste > Save & > Save Template, selesai.

Demikian.