Skip to main content

Customize Muslim Pro Widget untuk Jadwal Shalat

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&amp;language=id&amp;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&#39;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&amp;language=id&amp;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&#39;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&amp;language=id&amp;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.

MUI Kecamatan Parakansalak

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


Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Playlist tutorial Blogger
Playlist tutorial AMP HTML
Playlist Serba-serbi
Jangan lupa SUBSCRIBE
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB