Cara Memasang Jadwal Sholat dan Imsakiyah di Blog

Cara Memasang Jadwal Sholat dan Imsakiyah di Blog - Berhubung sekarang lagi bulan Ramadhan 1443 Hijriah, saya akan membagikan widget yang berguna untuk menginformasikan jadwal sholat dan imsak. Widget ini memang sedang populer dikarenakan waktu sholat dan imsak yang berbeda-beda di setiap kota.

Ada banyak sekali widget serupa di luar sana yang bisa digunakan, namun tampilan yang diberikan bisa dibilang sederhana. Berbeda dengan tampilan yang diberikan oleh waktusholat.org yang bisa diatur secara manual.

Selain tampilan, kita juga bisa dengan mudah mengubah lokasi waktu sholat dan imsak dengan mengubah kode HTML. Bagi yang penasaran dengan tampilannya, silahkan menekan tombol demo berikut:

Demo

Cara Memasang Jadwal Sholat dan Imsakiyah di Blog

• Masuk ke BLOGGER
• Pilih HALAMAN
• Pilih HALAMAN BARU
• Pilih TAMPILAN HTML
• Tempel ke dalamnya:

<!-- 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 -->

• Pilih PUBLIKASIKAN
• Selesai.

Catatan

Anda bisa mengganti jakarta pada JavaScript di atas dengan kota pilihan yang ingin ditampilkan data lengkapnya. Untuk melihat nama kota yang bisa digunakan, silahkan mengunjungi https://waktusholat.org/api/docs/cities.

Penutup

Untuk mendapatkan data yang lebih akurat, Anda juga bisa mengecek situs resmi KEMENAG melalui https://bimasislam.kemenag.go.id/jadwalimsakiyah.php. Akan disediakan jadwal sholat dan imsak secara lengkap di seluruh kota Indonesia.

Rekomendasi:

• Cara Memasang Click To Tweet Box di Blog
• Negara dengan CPC Google AdSense Tertinggi di Tahun 2024
• 14 Langkah Membuat Blog di Blogger (Wajib Tahu)

Cukup sekian artikel tentang Cara Memasang Jadwal Sholat dan Imsakiyah di Blog ini, Terima kasih.