Membuat Widget Jadwal Sholat & Imsakiyah 2023 di Blog

Membuat Widget Jadwal Sholat dan Imsakiyah Ramadhan 2023/1444 Hijriah di Blog Mudah dan Bisa di Sesuaikan.
Membuat Widget Jadwal Sholat dan Imsakiyah di Blog

Cara Membuat Widget Jadwal Sholat dan Imsakiyah di Blog - Banyak blogger yang menyajikan informasi waktu sholat berupa widget di dalam website atau blog mereka, karena jadwal sholat banyak dicari dan dibutuhkan oleh pengguna internet.

Apalagi di bulan ramadhan yang sebentar lagi tiba tentu informasi waktu sholat dan imsakiyah akan sangat dibutuhkan. Karena itu pada pembahasan kali ini kita akan berbagi cara membuat widget jadwal sholat dan imsakiyah di Blog.

Table of Contents

Cara Membuat Widget Waktu Sholat dan Imsakiyah di Blog

Sudah banyak tersedia widget jadwal sholat tersedia gratis dan tinggal di embed untuk di pasang di website atau blog kita dengan mudah. Namun beberapa widget tersebut sulit untuk dirubah sesuai gaya yang di inginkan.

Nah Apabila kamu tertarik untuk membuat widget jadwal sholat dan imsakiyah di blog yang mudah disesuaikan baik gaya, kota dan negara nya, kamu dapat mengikuti tutorial di artikel ini yang diambil dari https://waktusholat.org/Widget/.

Membuat Widget Waktu Sholat dan Imsakiyah di Blogger

  • Buka Dasbhoard akun blogger kamu
  • Klik Halaman > Buat Halaman Baru
  • Lalu Beri Judul dan ubah mode tulisan ke Mode HTML
  • Copy script HTML, CSS, JS di bawah ini dan paste kedalam halaman tersebut
  • Jika sudah klik Perbarui
<div style="margin:auto" id="prayer-container">
 <div class="prayer_time">Waktu Sholat</div>
    <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>Fajr</td>
                <td id="Fajr"></td>
            </tr>
            <tr>
                <td>Dhuhr</td>
                <td id="Dhuhr"></td>
            </tr>
            <tr>
                <td>Asr</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>
<script>
    var api_url = 'https://api.pray.zone/v2/times/today.json?city=bandung&school=9';
    document.addEventListener("DOMContentLoaded", function () {
        PrayerTimesApi();
    });
</script>
<style>
#prayer-container{width:100%;text-align:center}
.prayer_time{font-size:1.6em;font-weight:800}
#prayer-container #prayer_city{font-size:1.2em;font-weight:800}
#prayer-container table{width:100%}
#prayer-container tbody tr:nth-child(odd){background-color:#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}
</style>
<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>

Ganti nama kota yang ditandai dengan nama kota yang ingin kamu tampilkan data jadwal sholat dan imsakiyah nya. Untuk melihat daftar kota dan negara yang di dukung kamu bisa mengunjungi link berikut

Membuat Widget Waktu Sholat dan Imsakiyah di Wordpress

  • Buka Dasbhoard akun Wordpress kamu
  • Klik Halaman > Buat Halaman Baru
  • Lalu Beri Judul dan ubah mode tulisan ke Mode HTML
  • Copy script HTML, CSS, JS di atas tadi dan paste kedalam halaman tersebut
  • Jika sudah klik Perbarui

Ganti nama kota yang ditandai dengan nama kota yang ingin kamu tampilkan data jadwal sholat dan imsakiyah nya. Untuk melihat daftar kota dan negara yang di dukung kamu bisa mengunjungi link berikut

Demo Jadwal Sholat dan Imsakiyah 1444 H

Penutup

Nah itu tadi Membuat Widget Jadwal Sholat dan Imsakiyah di Blog. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada pertanyaan lain bisa bertanya melalui komentar.

Source and doc lengkap:
https://waktusholat.org/

#Keep Reading and Keep Working
Gabung dalam percakapan