Ditulis oleh: Ditulis pada: 2/26/2021
Customize Muslim Pro Widget untuk Jadwal Shalat - Jika Anda mengelola blog tentang agama Islam, tentu akan lebih berguna jika menampilkan widget jadwal Shalat. Widget ini tentunya berguna untuk mengingatkan pada waktu shalat untuk umat muslim yang berkunjung ke blog.
Nah, salah satu penyedia widget waktu shalat yaitu Muslim Pro. Blogger bisa meng-embed widget jadwal shalat dari Muslim Pro di blog.
Namun masalahnya ada beberapa blogger yang kurang suka dengan tampilan standar dari widget Muslim Pro ini karena hanya tersedia widget dengan posisi vertical untuk disimpan di sidebar. Sementara ada beberapa blogger yang ingin menyimpannya di bagian header dengan posisi horizontal.
Untuk itu, saya sediakan customize Muslim Pro widget dengan bentuk horizontal untuk disimpan di bagian header dan bentuk vertical untuk disimpan di sidebar.
Default Widget Muslim Pro
Untuk tampilan default widget ini seperti tampak di bawah ini.
Untuk menggunakan widget ini, Anda bisa simpan kode berikut di widget sidebar blog Anda.
<script src="https://www.muslimpro.com/muslimprowidget.js?cityid=1626381&language=id&timeformat=24" async=""></script>Customize Muslim Pro Widget
Horizontal
Widget horizontal ini bisa dipasang di bagian header blog yang penampakannya menjadi seperti berikut.
Untuk menggunakannya silahkan copy kode berikut ini. Lebar widgetnya 504px dan sudah responsive.
<div class="ws">
<div class="tanggal">
<script>
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at', 'Sabtu'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
</script>
</div>
<style>
.ws {
padding: 0;
position: relative;
width: 504px;
}
.ws a {
text-decoration: none;
}
.ws .MPwidget {
width: 100%;
background: rgba(250, 250, 250, 0);
margin: 10px 0;
box-shadow: 0 0 0 rgba(250, 250, 250, 0);
}
.ws .MPheader {
background: rgba(250, 250, 250, 0);
padding: 0;
min-height: 30px;
}
.ws .MPheader .logo {
display: none;
}
.ws .MPheader .title,
.ws .tanggal {
padding: 0;
height: 30px;
line-height: 30px;
font-size: 14px;
}
.ws .MPwidget .title a,
.ws .tanggal {
color: #888;
font-family: 'Roboto', 'Open Sans', sans-serif;
font-weight: bold;
font-style: normal;
pointer-events: none;
}
.ws .tanggal {
position: absolute;
right: 0;
top: 0;
z-index: 20;
color: #dd3333;
float: right;
}
.ws .MPtimetable tr:first-child {
display: none;
}
.ws .MPtimetable tr {
display: inline-table;
width: 84px;
position: relative;
}
.ws .MPtimetable td {
position: relative;
display: table-row;
width: 74px;
padding: 5px;
text-align: center;
font-size: 10px;
height: 20px;
line-height: 20px;
background: rgba(250, 250, 250, 0);
text-transform: uppercase;
color: rgba(0, 0, 0, 0);
}
.ws .MPtimetable tr td:before {
font-size: 10px;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
color: #333;
height: 20px;
line-height: 20px;
}
.ws .MPtimetable tr:nth-child(2) td:nth-child(1):before {
content: "SUBUH";
}
.ws .MPtimetable tr:nth-child(3) td:nth-child(1):before {
content: "TERBIT";
}
.ws .MPtimetable tr:nth-child(4) td:nth-child(1):before {
content: "DZUHUR";
}
.ws .MPtimetable tr:nth-child(5) td:nth-child(1):before {
content: "ASHAR";
}
.ws .MPtimetable tr:nth-child(6) td:nth-child(1):before {
content: "MAGHRIB";
}
.ws .MPtimetable tr:nth-child(7) td:nth-child(1):before {
content: "ISYA";
}
.ws .MPtimetable td:nth-child(2) {
font-size: 14px;
height: 24px;
line-height: 20px;
background: rgba(250, 250, 250, 0);
text-transform: uppercase;
text-align: center;
color: #7bae91
}
.ws .MPtimetable tr:nth-child(2n) {
background-color: #f7f7f7;
}
.ws .MPfooter {
display: none;
}
@media screen and (max-width:425px) {
.ws {
width: 100%;
}
.ws .MPtimetable tr {
width: 16.6666%;
}
.ws .MPwidget {
margin: 3px 0 10px 0;
}
.ws .MPheader .title,
.ws .tanggal {
font-size: 12px;
}
.ws .MPtimetable tr td:before {
height: 17px;
line-height: 17px;
}
.ws .MPtimetable td:nth-child(2) {
font-size: 13px;
height: 20px;
line-height: 14px;
}
}
</style>
<script src="https://www.muslimpro.com/muslimprowidget.js?cityid=1626381&language=id&timeformat=24" async=""></script>
</div>Vertical
Widget vertical ini bisa dipasang di bagian sidebar blog yang penampakannya menjadi seperti berikut.
Untuk menggunakannya silahkan copy kode berikut ini. Lebar widgetnya 300px.
<div class="ws">
<div class="tanggal">
<script>
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at', 'Sabtu'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
</script>
</div>
<style>
.ws {
padding: 0;
position: relative;
width: 300px;
}
.ws a {
text-decoration: none;
}
.ws .MPwidget {
width: 100%;
background: rgba(250, 250, 250, 0);
margin: 10px 0;
box-shadow: 0 0 0 rgba(250, 250, 250, 0);
}
.ws .MPheader {
background: rgba(250, 250, 250, 0);
padding: 0;
min-height: 30px;
margin: 0 0 30px;
}
.ws .MPheader .logo {
display: none;
}
.ws .MPheader .title{
padding: 0;
height: 30px;
line-height: 30px;
font-size: 14px;
}
.ws .MPwidget .title a,
.ws .tanggal {
color: #888;
font-family: 'Roboto', 'Open Sans', sans-serif;
font-weight: bold;
font-style: normal;
pointer-events: none;
}
.ws .tanggal {
position: absolute;
left: 0;
top: 30px;
z-index: 20;
color: #dd3333;
float: left;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.ws .MPtimetable tr:first-child {
display: none;
}
.ws .MPtimetable tr {
display: inline-table;
width: 100%;
position: relative;
}
.ws .MPtimetable td {
position: relative;
display: table-cell;
width: 50%;
padding: 5px;
text-align: left;
font-size: 14px;
height: 20px;
line-height: 20px;
background: rgba(250, 250, 250, 0);
text-transform: uppercase;
color: rgba(0, 0, 0, 0);
}
.ws .MPtimetable tr td:before {
font-size: 14px;
text-align: left;
position: absolute;
top: 0;
left: 10px;
right: 0;
color: #333;
height: 30px;
line-height: 30px;
}
.ws .MPtimetable tr:nth-child(2) td:nth-child(1):before {
content: "SUBUH";
}
.ws .MPtimetable tr:nth-child(3) td:nth-child(1):before {
content: "TERBIT";
}
.ws .MPtimetable tr:nth-child(4) td:nth-child(1):before {
content: "DZUHUR";
}
.ws .MPtimetable tr:nth-child(5) td:nth-child(1):before {
content: "ASHAR";
}
.ws .MPtimetable tr:nth-child(6) td:nth-child(1):before {
content: "MAGHRIB";
}
.ws .MPtimetable tr:nth-child(7) td:nth-child(1):before {
content: "ISYA";
}
.ws .MPtimetable td:nth-child(1) {
border-right: 1px solid #dedede
}
.ws .MPtimetable td:nth-child(2) {
color: #7bae91;
text-align: right;
padding-right: 10px;
}
.ws .MPtimetable tr:nth-child(2n) {
background-color: #f7f7f7;
}
.ws .MPfooter {
display: none;
}
</style>
<script src="https://www.muslimpro.com/muslimprowidget.js?cityid=1626381&language=id&timeformat=24" async=""></script>
</div>Untuk contoh pemasangan widget ini di blog, berikut pada blog yang dikelola oleh kang Ismet, MUI Kecamatan Parakansalak Kabupaten Sukabumi (Blogger) dengan widget horizontal di bagian header blog.
Pengaturan Wilayah atau Kota
Pada kode widget terdapat js dengan param cityid yang berguna untuk menandai wilayah. Pastikan untuk mengganti angka untuk cityid dengan ID kota yang ingin ditampilkan jadwal sholatnya.
Untuk menemukan ID kota, silahkan gunakan Google penelusuran. Sebagai contoh, misalnya Anda akan mencari ID kota Jakarta, maka silahkan ketikan "Prayer Times Jakarta site:muslimpro.com" di kotak pencarian Google. Selanjutnya silahkan klik hasil pencariannya seperti berikut.
Nah, untuk ID kota Jakarta yang Anda cari akan terlihat di akhir URL halamannya seperti berikut.
Selesai, semoga bermanfaat.
Referensi: https://masjid-addawah.com/ (Wordpress).