Cara Menampilkan Jadwal Sholat dengan AMP I-Frame

Tinggal menghitung hari lagi kita telah memasuki bulan Ramadhan 1439 H. Bulan yang penuh dengan ampunan dan berkah bagi kita, khususnya umat Islam. Nah, ga ada salahnya kalo saya mencoba membagikan sesuatu yang semoga bisa menjadi amal kebaikan dan bermanfaat bagi kita semua.

Di artikel kali ini saya akan membagikan jadwal sholat yang sekaligus bisa dipakai sebagai jadwal puasa bagi umat muslim dengan menggunakan AMP I-Frame. Saya mengambil widget jadwal sholat dari www.jadwalsholat.org.

Pertama kali silahkan masuk ke halaman https://www.jadwalsholat.org/widget-jadwal-sholat#.Wuxh2vmFO01

Silahkan pilih widget yang anda sukai, kemudian copy di notepad anda.

<p style="text-align: center;">

<iframe src="https://www.jadwalsholat.org/adzan/monthly.php?id=307" height="940" width="430" frameborder="0"></iframe><a href="https://www.jadwalsholat.org" target="_blank"><img class="aligncenter" style="text-align: center;" alt="jadwal-sholat" src="https://www.jadwalsholat.org/wp-content/uploads/2013/09/jadwal-sholat.png" width="81" height="18" /></a></p>

Kira-kira seperti diatas kode dari widgetnya.

Jika anda langsung paste ke postingan widget anda, dipastikan kode tersebut menyebabkan error AMP HTML, maka dari itu cukup gunakan kode yang sudah saya marking (disimpan di notepad).

Sekarang gunakan kode dibawah ini untuk menampilkan postingan widget anda supaya valid AMP HTML.

<amp-iframe title="Jadwal Sholat"

              src="https://www.jadwalsholat.org/adzan/monthly.php?id=307"

              height="940"

              layout="fixed-height"

              frameborder="0"

              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">

<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPJROUR3BTxIO1puWTTS91nuTE_S61-2tgj8r5sGRG4LaCAsmOUl5D0vGedyPE_dgyCFnXa2MI0dnc2JwVOaONAaGjuLqljoL27j7RdRGC1Su9aG7xlJN5xBaqZnNeaa1cN_anCHvHZg/s1600/placeholder.png"

             layout="fixed-height"

             height="360"

             width="auto"

             placeholder>

</amp-img>

</amp-iframe>

Silakan copy kode yang sudah disimpan di notepad dan paste tepat di kode diatas yang sudah saya marking.

Nah untuk kode id=307, itu adalah kode daerah untuk Yogyakarta, jadi tinggal anda sesuaikan, sesuai tempat tinggal anda,

Buka halaman https://www.jadwalsholat.org/widget-jadwal-sholat#.WuxouPmFO00 lagi dan cari Table ID daerah di Indonesia. Silakan cari sesuai tempat tinggal anda.

Untuk melihat contohnya, silakan lihat melalui tombol demo dibawah ini :

Demo

Source :

1. https://www.jadwalsholat.org