Widget Jadwal Sholat Menggunakan API myQuran [Update]

Membuat Widget Jadwal Sholat dan Imsakiyah di Blog

Tutorial ini merupakan lanjutan dari artikel Cara membuat widget jadwal sholat sebelumnya yang memanfaatkan widget pihak ketiga.

Tapi karena widget untuk menampilkan waktu sholat tersebut sudah tidak berfungsi, di update tutorial kali ini kita akan coba membuat versi terbarunya dengan mengambil data waktu sholat dari API myquran.

Langkahnya cukup sederhana, jika kalian tertarik ingin menerapkan widget jadwal sholat di blog, berikut cara menerapkannya.

Cara Memasang Widget Jadwal Sholat di Blog

API Myquran menyediakan jadwal waktu sholat untuk seluruh kota-kota besar di Indonesia. Kalian bisa menentukan kota yang akan di tampilkan kedalam widget nantinya.

Source Code Jadwal Sholat HTML, CSS, Javascript

Langkah pertama simpan CSS berikut kedalam template atau tema blog kalian.

/*-- CSS Widget Jadwal Sholat @inputekno --*/
#inputeknoJdwl {display:block;position:relative;background-color:#fff;box-shadow:0 1px 4px 0 rgba(141,150,170,0.4);border-radius:8px;font-size:1em;overflow:hidden}
#inputeknoJdwl .header-jdwlsholat {display:flex;align-items:center;gap:1rem;position:relative;padding:16px}
#inputeknoJdwl .header-jdwlsholat:before, #inputeknoJdwl .header-jdwlsholat:after {position:absolute;width:100%;height:100%;top:0;right:0}
#inputeknoJdwl .header-jdwlsholat:before {content:'';background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7CkWMxrtIRBBaWbg0lny0cMR7dcsJXloFyjrFyFCXX47nKMtfk-hMJkX3rxFUEHhlNI-3mxexi46zN9TKKUfjnqMrPcSVK0h3TNQdASrqPCPqfvpvj0MyNmyHLX0XnvsNZf1d_qLonhE_2etABPyxnmUeW9HqRvVRzWlXp4gwo8lQuFKOcw9WWs9aXFg/s900-rw-l80-e30/media-1.webp);background-size:cover;background-repeat:no-repeat;background-position:center}
#inputeknoJdwl .header-jdwlsholat:after {content:'';background-image:linear-gradient(to top left, #6f42c1 -30%,#0000 310%)}
#inputeknoJdwl .header-jdwlsholat .icon {width:44px;height:44px;padding:8px;background-color:rgb(255 253 253 / 25%);backdrop-filter:blur(10px);color:#fff;box-shadow:0px 1px 6px rgb(49 53 59 / 12%);border-radius:10px;z-index:1}
#inputeknoJdwl .header-jdwlsholat .h-jdwl {width:100%;color:#fff;line-height:1.4;z-index:1;display:flex;align-items:center;flex-direction:row-reverse;justify-content:space-between;flex-wrap:wrap;flex:1}
#inputeknoJdwl .content-jdwlsholat {padding-top:15px;padding:12px 16px 16px}
#inputeknoJdwl .content-jdwlsholat >* {display:flex;align-items:center;justify-content:space-between;line-height:32px;border-bottom:0.5px solid #e5e7e9;padding:4px 16px}
#inputeknoJdwl .content-jdwlsholat >*:last-child {border-bottom:none}
#inputeknoJdwl .time {font-weight:bold;color:#6f42c1;text-transform:uppercase}
#inputeknoJdwl .loc {font-weight:bold;text-transform:uppercase;flex:auto}
#inputeknoJdwl .date, #inputeknoJdwl .name {opacity:.8}
#inputeknoJdwl .date{flex:auto}

URL Background https://blogger.googleusercontent.com/img/b/.../media-1.webp
Silakan ganti URL background diatas pada CSS dengan background kalian

Berikutnya letakan Javascript di bawah ini tepat di atas kode </body> atau </body>.

<script>/*<![CDATA[*/ /* Widget Jadwal Sholat API MyQuran | by ~ @inputekno */ function getJadwal(){let e=new Date,t=e.getDay(),a=e.getDate(),r=e.getMonth()+1,n=e.getFullYear(),u=["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"][t]+", "+a+" "+["January","February","March","April","May","June","July","August","September","October","November","December"][r-1]+" "+n,l=document.querySelector(".date"),i=document.querySelector(".subuh"),h=document.querySelector(".dhuha"),o=document.querySelector(".dzuhur"),s=document.querySelector(".ashar"),c=document.querySelector(".maghrib"),y=document.querySelector(".isya");
fetch("https://api.myquran.com/v2/sholat/jadwal/
1219
/"+n+"/"+r+"/"+a).then(e=>e.json()).then(e=>{let t=e.data,a=t.jadwal;document.querySelector(".loc").innerText="Wilayah "+t.lokasi,l.innerText=""+u,i.innerText=""+a.subuh,h.innerText=""+a.dhuha,o.innerText=""+a.dzuhur,s.innerText=""+a.ashar,c.innerText=""+a.maghrib,y.innerText=""+a.isya;let r=document.createElement("div");r.classList.add("times"),l.appendChild(r);let n=()=>{var e,t=new Date,a=t.getHours(),r=t.getMinutes(),n=t.getSeconds();document.querySelector(".times").innerHTML=a+":"+r+":"+n};setInterval(n,500)}).catch(e=>console.log(e))}getJadwal();
/*]]>*/</script>

Ganti ID kota 1219 yang di tandai dengan ID kota yang akan kalian tampilkan.

Untuk melihat list kota dan mendapatkan ID nya kalian bisa lihat di https://api.myquran.com/v2/sholat/kota/semua.

Desain Jadwal Imsakiyah 1444 H/ 2023 (Free CDR + Format PPT) - InpuTekno

Download Template Desain Jadwal Imsakiyah 1444 H/ 2023 Gratis Format CDR dan PPT untuk keperluan Bulan Rahamdhan 2023.

www.inputekno.com

Terakhir letakan HTML jadwal sholat berikut sesuai keinginan kalian, baik di halaman ataupun di sidebar sebagai widget.

<div id='inputeknoJdwl' class='container-wrapp'>
  <div class='header-jdwlsholat'>
    <div class='icon'><svg class="timeIcn" viewBox="0 0 512 512"><path d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 128v144h96"/></svg></div>
    <div class='h-jdwl'>
      <div class='loc'>Wilayah</div>
      <div class='date'>Senin, 25 Agustus 2023</div>
    </div>
  </div>
  <div class='content-jdwlsholat'>
    <div class='jdwlsholat'>
      <span class='name'>Subuh</span>
      <span class='time subuh'>00:00</span>
    </div>
    <div class='jdwlsholat'>
      <span class='name'>Duha</span>
      <span class='time dhuha'>00:00</span>
    </div>
    <div class='jdwlsholat'>
      <span class='name'>Dzuhur</span>
      <span class='time dzuhur'>00:00</span>
    </div>
    <div class='jdwlsholat'>
      <span class='name'>Ashar</span>
      <span class='time ashar'>00:00</span>
    </div>
    <div class='jdwlsholat'>
      <span class='name'>Maghrib</span>
      <span class='time maghrib'>00:00</span>
    </div>
    <div class='jdwlsholat'>
      <span class='name'>Isya</span>
      <span class='time isya'>00:00</span>
    </div>
  </div>
</div>

Silakan ganti Icon SVG sesuai keinginan:

Penutup

Nah itu tadi cara memasang widget waktu sholat di blog terbaru. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada pertanyaan lain bisa bertanya melalui komentar.