Cara Mudah Pasang Widget Jadwal Imsakiyah Ramadhan Di Blog

Assalaamu'alaikum. Hai sobat semua. Mumpung sekarang lagi bulan Ramadhan 1443 Hijriah, Fajrinfo mau berbagi tips blogger yang insyaa Allah berguna untuk menginformasikan jadwal imsakiyah tentang waktu sholat dan lainnya. Metode ini sebenarnya memang sudah populer sebab waktu sholat di wilayah Indonesia cukup beragam.

Sebetulnya di luar sana banyak sekali tampilan serupa yang bisa kamu gunakan, tetapi tampilan yang diberikan kadang terlalu sederhana. Berbeda dengan tampilan jadwal imsakiyah di blogger yang diberikan oleh waktusholat.org yang bisa dengan mudah diatur secara manual.

Selain itu, sebelum mempublikasikan Jadwal Imsakiyah Ramadhan ini di blog, kamu bisa dengan mudah mengubah penunjuk lokasi daerah dengan mengubahnya pada kode HTML. Jika kamu merasa penasaran dengan tampilannya, jangan sungkan untuk melihat tampilan Demo berikut:

Lihat Demo

Cara Pasang Jadwal Imsakiyah Ramadhan Di Blog

• Masuk ke BLOGGER
• Lalu pilih Halaman
• Kemudiaan pilih Halaman Baru
• Setelah itu pilih Tampilan HTML
• Tempel kode script html berikut ini ke dalam halaman yang dibuat tersebut:

<!-- HTML -->
<div style="margin:auto" id="prayer-container">
  <div id="prayer_city"></div>
  <div id="prayer_date"></div>
  <div id="prayer_clock"></div>
  <table>
    <tbody>
      <tr>
        <td>Imsak</td>
        <td id="Imsak"></td>
      </tr>
      <tr>
        <td>Fajar</td>
        <td id="Fajr"></td>
      </tr>
      <tr>
        <td>Dhuhur</td>
        <td id="Dhuhr"></td>
      </tr>
      <tr>
        <td>Azhar</td>
        <td id="Asr"></td>
      </tr>
      <tr>
        <td>Maghrib</td>
        <td id="Maghrib"></td>
      </tr>
      <tr>
        <td>Isha</td>
        <td id="Isha"></td>
      </tr>
    </tbody>
  </table>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
/* Made by waktusholat.org, please don't remove this comment */
.prayer_time{font-size:1.6em;font-weight:800}
#prayer-container{width:100%;text-align:center}
#prayer-container #prayer_city{font-size:1.2em;font-weight:800}
#prayer-container table{width:100%}
#prayer-container tbody tr:nth-child(odd){background:#f3f3f3}
#prayer-container tbody td{padding:10px 20px}
#prayer-container tbody td:nth-child(1){text-align:left}
#prayer-container tbody td:nth-child(2){text-align:right}
/* Dark Mode */
.drK table tbody td{background:#252526}
.drK #prayer-container tbody tr:nth-child(odd){background:#252526}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script>var api_url="https://api.pray.zone/v2/times/today.json?city=jakarta&school=9";document.addEventListener("DOMContentLoaded",function(){PrayerTimesApi();})</script>
<script>function PrayerTimesApi(){var t=navigator.language||navigator.userLanguage,i={weekday:"long",year:"numeric",month:"long",day:"numeric"},n=new XMLHttpRequest;n.onreadystatechange=function(){if(n.readyState===4)if(n.status===200){var r=JSON.parse(n.responseText),u=new Date(r.results.datetime[0].date.gregorian),f=r.results.location.local_offset;document.getElementById("prayer_city").innerHTML=r.results.location.city;document.getElementById("prayer_date").innerHTML=u.toLocaleDateString(t,i);document.getElementById("Imsak").innerHTML=r.results.datetime[0].times.Imsak;document.getElementById("Fajr").innerHTML=r.results.datetime[0].times.Fajr;document.getElementById("Dhuhr").innerHTML=r.results.datetime[0].times.Dhuhr;document.getElementById("Asr").innerHTML=r.results.datetime[0].times.Asr;document.getElementById("Maghrib").innerHTML=r.results.datetime[0].times.Maghrib;document.getElementById("Isha").innerHTML=r.results.datetime[0].times.Isha;SetTheClock(f)}else console.log("An error occurred during your request: "+n.status+" "+n.statusText)};n.open("Get",api_url,!0);n.send()}function time(n){var t=new Date((new Date).getTime()+n*36e5),i=t.getUTCHours(),r=t.getUTCMinutes(),u=t.getUTCSeconds();i=addZero(i);r=addZero(r);u=addZero(u);document.getElementById("prayer_clock").innerHTML=i+":"+r+":"+u}function addZero(n){return n<=9?"0"+n:n}function SetTheClock(n){time(n);setInterval(function(){time(n)},1e3)}</script>
<!-- End JavaScript -->

• Setelah itu pilih tombol Publikasikan yang ada di sebelah kanan atas
• Selesai.

Catatan:
Kamu bisa mengganti nama Jakarta pada JavaScript tersebut dengan kota pilihan yang ingin kamu munculkan data lengkapnya. Untuk melihat nama kota yang bisa kamu gunakan, silahkan kunjungi laman https://waktusholat.org/api/docs/cities.

Untuk memperoleh data yang lebih akurat, kamu bisa juga memeriksa website resmi KEMENAG melalui https://bimasislam.kemenag.go.id/jadwalimsakiyah.php. Disana akan tersedia jadwal sholat dan lainnya secara lengkap di seluruh kota wilayah Indonesia.

Cukup sekian pembahasan yang bisa kami bagikan mengenai cara memasang jadwal imsakiyah sholat di Blog. Jadwal imsakiyah ini sebenarnya tidak hanya bisa dipakai pada bulan Ramadhan saja. Namun di bulan-bulan lainnya juga tetap bisa digunakan yang penting selalu memantau jadwal imsakiyah yang bersumber dari Kemenag. Semoga bermanfaat.