Membuat Widget Jadwal Sholat & Imsakiyah 2023 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.

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/.

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

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

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.