Beranda
Blogger
Programmer

Widget Jadwal Sholat Menggunakan API myQuran [Update]

Cara Memasang Widget waktu sholat menggunakan API MyQuran untuk Blog.
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.

Table of Contents

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.

Demo

Source Code Jadwal Sholat HTML, CSS, Javascript

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

<style>
/*-- 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}
</style>

Catatan:

  • 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 &lt;/body&gt;.

<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.comwww.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:

<svg viewBox="0 0 32 32" class="i i-masjid-1" width="32" height="32"><path d="M31.342 16.792a.447.447 0 0 0-.223-.386c.544-.499.881-1.077.881-1.901 0-2.43-2.962-2.908-2.962-4.026 0 1.118-2.962 1.596-2.962 4.026 0 .824.337 1.402.881 1.901a.447.447 0 0 0 .202.833v2.401a.448.448 0 0 0 0 .894v1.253h-5.552v-1.828h-.637V18.7h-.053c1.123-1.094 1.811-2.365 1.811-4.14 0-5.01-5.543-6.369-6.567-8.476a2.287 2.287 0 0 0 .552.069c.698 0 1.349-.311 1.788-.852a2.322 2.322 0 0 0 .361-.625l.014-.035-.032.021a2.272 2.272 0 0 1-1.239.365 2.281 2.281 0 0 1-1.43-.507 2.27 2.27 0 0 1-.694-2.58l.013-.035-.032.02a2.297 2.297 0 0 0-.536.483 2.281 2.281 0 0 0-.499 1.687c.064.611.363 1.16.84 1.546a2.297 2.297 0 0 0 .61.352c-.905 2.159-6.608 3.484-6.608 8.566 0 1.775.688 3.047 1.811 4.14h-.053v1.259h-.637v1.828H4.84v-1.259a.448.448 0 0 0 0-.894v-2.401a.448.448 0 0 0 .202-.833c.543-.499.881-1.077.881-1.901 0-2.43-2.962-2.908-2.962-4.026C2.961 11.59 0 12.069 0 14.498c0 .824.338 1.402.881 1.901a.447.447 0 0 0 .202.833v2.401a.448.448 0 0 0 0 .894v1.259H1.08v8.309h3.69v-3.204c0-1.33 1.905-2.201 1.905-2.201s1.905.871 1.905 2.201v3.204h4.748v-4.573c0-1.865 2.672-3.086 2.672-3.086s2.672 1.222 2.672 3.086v4.573h4.748v-3.204c0-1.33 1.905-2.201 1.905-2.201s1.905.871 1.905 2.201v3.204h3.689v-8.309h-.002v-1.253a.448.448 0 0 0 0-.894v-2.401a.448.448 0 0 0 .425-.447z"/></svg>
<svg viewBox="0 0 32 32" class="i i-masjid-2" width="32" height="32"><path d="M28.321 20.071v7.888h-1.959V15.073h-4.019v-1.467h2.1l-.014-.993a8.379 8.379 0 0 0-2.508-5.882 8.371 8.371 0 0 0-4.942-2.374V2.115H15.02v2.242a8.363 8.363 0 0 0-4.942 2.374 8.387 8.387 0 0 0-2.508 5.882l-.014.993h2.1v1.467H5.659v.98h-.012V27.96H3.7v-7.889H0v9.814h32v-9.814h-3.679zm-16.744 7.855H8.662v-5.287h2.915v5.287zm.94-7.536h-4.79v-1.959h4.79v1.959zm4.936 7.536h-2.914v-5.287h2.914v5.287zm.873-7.536h-4.79v-1.959h4.79v1.959zm5.004 7.536h-2.915v-5.287h2.915v5.287zm.869-7.536H19.41v-1.959h4.789v1.959z"/></svg>
<svg viewBox="0 0 32 32" class="i i-masjid-3" width="32" height="32"><path d="M22.176 16.789h-.241c-.377-2.187-.438-4.431-1.744-5.711-1.279-1.254-2.953-1.643-4.063-2.658v-.475a.302.302 0 0 0 .173-.272.302.302 0 0 0-.173-.272v-.202a.174.174 0 0 0 .043-.113c0-.095-.173-.587-.173-.587s-.173.492-.173.587c0 .043.017.083.043.113v.202a.302.302 0 0 0-.173.272c0 .12.071.223.173.272v.475c-1.11 1.015-2.783 1.403-4.063 2.658-1.306 1.281-1.367 3.525-1.744 5.711H9.82l-.414 1.07h13.182l-.414-1.07zM2.512 18.694V32h9.559v-7.125c0-1.736 3.928-2.874 3.928-2.874s3.929 1.138 3.929 2.874V32h9.559V18.694H2.512zm22.75-.863h3.576V13.43h.338v-1.1h-.675V8.053h.675V6.952h-1.064V4.163c0-.512-.362-.939-.844-1.039v-.695a.508.508 0 0 0 0-.916v-.338a.285.285 0 0 0 .072-.19c0-.16-.29-.986-.29-.986s-.29.825-.29.986a.29.29 0 0 0 .072.19v.338a.508.508 0 0 0 0 .916v.695c-.482.1-.844.527-.844 1.039v2.789h-1.064v1.1h.675v4.276h-.675v1.1h.338v4.402zm-22.102 0h3.576V13.43h.338v-1.1h-.675V8.053h.675V6.952H6.01V4.163c0-.512-.362-.939-.844-1.039v-.695a.508.508 0 0 0 0-.916v-.338a.285.285 0 0 0 .072-.19C5.239.825 4.949 0 4.949 0s-.29.825-.29.986a.29.29 0 0 0 .072.19v.338a.508.508 0 0 0 0 .916v.695c-.482.1-.844.527-.844 1.039v2.789H2.823v1.1h.675v4.276h-.675v1.1h.338v4.401z"/></svg>

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.

Referensi Link:
Hi. Lets connect and be friends!
Gabung dalam percakapan