Cara Pasang Widget Waktu Solat Pada Blog

| 21 comments

Widget waktu solat seluruh Malaysia ini membolehkan pembaca blog menyemak waktu solat fardhu untuk kawasan pilihan mereka. Kelebihan widget kami ialah pembaca boleh memilih kawasan atau zon solat tanpa perlu meninggalkan blog anda. Pilihan kawasan boleh dibuat menggunakan menu dropdown yang ada pada widget itu sendiri.

Waktu solat yang dipaparkan adalah bersumberkan jadual e-solat JAKIM jadi anda tak perlu ragu akan ketepatannya.

Anda boleh tengok dan test live demo pada page Waktu Solat ini.

Saya dah kodkan widget ini sebaik mungkin supaya anda tidak perlu bersusah payah. Tak perlu tulis kod javascript dan tak perlu copy-paste bagai. Anda cuma perlu klik. Untuk mendapat hasil yang terbaik, widget ini hendaklah dipasang pada sidebar atau footer yang lebarnya 250px atau lebih.

Berikut adalah langkah-langkah untuk memasang widget waktu solat pada blog Blogger (blogspot) anda:

Klik butang "Add To Blogger" di bawah.
 <select title="Klik untuk pilih kawasan anda" name="area" onchange='var zon=this.options[this.selectedIndex].value;solat(zon);' > <option title="KUALA LUMPUR -- Wilayah Persekutuan Kuala Lumpur" value="sgr04" />KUALA LUMPUR -- Wilayah Persekutuan Kuala Lumpur <option title="JOHOR -- Pulau Aur dan Pemanggil" value="JHR01" />JOHOR -- Pulau Aur dan Pemanggil <option title="JOHOR -- Kota Tinggi, Mersing, Johor Bahru" value="JHR02" />JOHOR -- Kota Tinggi, Mersing, Johor Bahru <option title="JOHOR -- Kluang dan Pontian" value="JHR03" />JOHOR -- Kluang dan Pontian <option title="JOHOR -- Batu Pahat, Muar, Segamat, Gemas" value="JHR04" />JOHOR -- Batu Pahat, Muar, Segamat, Gemas <option title="KEDAH -- Kota Setar, Kubang Pasu, Pokok Sena" value="KDH01" />KEDAH -- Kota Setar, Kubang Pasu, Pokok Sena <option title="KEDAH -- Pendang, Kuala Muda, Yan" value="KDH02" />KEDAH -- Pendang, Kuala Muda, Yan <option title="KEDAH -- Padang Terap, Sik, Baling" value="KDH03" />KEDAH -- Padang Terap, Sik, Baling <option title="KEDAH -- Kulim, Bandar Baharu" value="KDH04" />KEDAH -- Kulim, Bandar Baharu <option title="KEDAH -- Langkawi" value="KDH05" />KEDAH -- Langkawi <option title="KEDAH -- Puncak Gunung Jerai" value="KDH06" />KEDAH -- Puncak Gunung Jerai <option title="KELANTAN -- K.Bharu,Bachok,P.Puteh,Tumpat,P.Mas,T.Merah,Machang,K.Krai,Mukim Chiku" value="KTN01" />KELANTAN -- K.Bharu,Bachok,P.Puteh,Tumpat,P.Mas,T.Merah,Machang,K.Krai,Mukim Chiku <option title="KELANTAN -- Jeli, Gua Musang (Mukim Galas, Bertam)" value="KTN03" />KELANTAN -- Jeli, Gua Musang (Mukim Galas, Bertam) <option title="MELAKA -- Bandar Melaka, Alor Gajah, Jasin, Masjid Tanah, Merlimau, Nyalas" value="MLK01" />MELAKA -- Bandar Melaka, Alor Gajah, Jasin, Masjid Tanah, Merlimau, Nyalas <option title="NEGERI SEMBILAN -- Jempol, Tampin" value="NGS01" />NEGERI SEMBILAN -- Jempol, Tampin <option title="NEGERI SEMBILAN -- Port Dickson, Seremban, Kuala Pilah, Jelebu, Rembau" value="NGS02" />NEGERI SEMBILAN -- Port Dickson, Seremban, Kuala Pilah, Jelebu, Rembau <option title="PAHANG -- Pulau Tioman" value="PHG01" />PAHANG -- Pulau Tioman <option title="PAHANG -- Kuantan, Pekan, Rompin, Muadzam Shah" value="PHG02" />PAHANG -- Kuantan, Pekan, Rompin, Muadzam Shah <option title="PAHANG -- Maran, Chenor, Temerloh, Bera, Jerantut" value="PHG03" />PAHANG -- Maran, Chenor, Temerloh, Bera, Jerantut <option title="PAHANG -- Bentong, Raub, Kuala Lipis" value="PHG04" />PAHANG -- Bentong, Raub, Kuala Lipis <option title="PAHANG -- Genting Sempah, Janda Baik, Bukit Tinggi" value="PHG05" />PAHANG -- Genting Sempah, Janda Baik, Bukit Tinggi <option title="PAHANG -- Bukit Fraser, Genting Higlands, Cameron Higlands" value="PHG06" />PAHANG -- Bukit Fraser, Genting Higlands, Cameron Higlands <option title="PERLIS -- Kangar, Padang Besar, Arau" value="PLS01" />PERLIS -- Kangar, Padang Besar, Arau <option title="PULAU PINANG -- Seluruh Negeri Pulau Pinang" value="PNG01" />PULAU PINANG -- Seluruh Negeri Pulau Pinang <option title="PERAK -- Tapah,Slim River dan Tanjung Malim" value="PRK01" />PERAK -- Tapah,Slim River dan Tanjung Malim <option title="PERAK -- Ipoh, Batu Gajah, Kampar, Sg. Siput dan Kuala Kangsar" value="PRK02" />PERAK -- Ipoh, Batu Gajah, Kampar, Sg. Siput dan Kuala Kangsar <option title="PERAK -- Pengkalan Hulu, Grik dan Lenggong" value="PRK03" />PERAK -- Pengkalan Hulu, Grik dan Lenggong <option title="PERAK -- Temengor dan Belum" value="PRK04" />PERAK -- Temengor dan Belum <option title="PERAK -- Teluk Intan, Bagan Datoh, Kg.Gajah,Sri Iskandar, Beruas,Parit,Lumut,Setiawan dan Pulau Pangkor" value="PRK05" />PERAK -- Teluk Intan, Bagan Datoh, Kg.Gajah,Sri Iskandar, Beruas,Parit,Lumut,Setiawan dan Pulau Pangkor <option title="PERAK -- Selama, Taiping, Bagan Serai dan Parit Buntar" value="PRK06" />PERAK -- Selama, Taiping, Bagan Serai dan Parit Buntar <option title="PERAK -- Bukit Larut" value="PRK07" />PERAK -- Bukit Larut <option title="SABAH -- Zon 1 - Sandakan, Bdr. Bkt. Garam, Semawang, Temanggong, Tambisan" value="SBH01" />SABAH -- Zon 1 - Sandakan, Bdr. Bkt. Garam, Semawang, Temanggong, Tambisan <option title="SABAH -- Zon 2 - Pinangah, Terusan, Beluran, Kuamut, Telupit" value="SBH02" />SABAH -- Zon 2 - Pinangah, Terusan, Beluran, Kuamut, Telupit <option title="SABAH -- Zon 3 - Lahad Datu, Kunak, Silabukan, Tungku, Sahabat, Semporna" value="SBH03" />SABAH -- Zon 3 - Lahad Datu, Kunak, Silabukan, Tungku, Sahabat, Semporna <option title="SABAH -- Zon 4 - Tawau, Balong, Merotai, Kalabakan" value="SBH04" />SABAH -- Zon 4 - Tawau, Balong, Merotai, Kalabakan <option title="SABAH -- Zon 5 - Kudat, Kota Marudu, Pitas, Pulau Banggi" value="SBH05" />SABAH -- Zon 5 - Kudat, Kota Marudu, Pitas, Pulau Banggi <option title="SABAH -- Zon 6 - Gunung Kinabalu" value="SBH06" />SABAH -- Zon 6 - Gunung Kinabalu <option title="SABAH -- Zon 7 - Papar, Ranau, Kota Belud, Tuaran, Penampang, Kota Kinabalu" value="SBH07" />SABAH -- Zon 7 - Papar, Ranau, Kota Belud, Tuaran, Penampang, Kota Kinabalu <option title="SABAH -- Zon 8 - Pensiangan, Keningau, Tambunan, Nabawan" value="SBH08" />SABAH -- Zon 8 - Pensiangan, Keningau, Tambunan, Nabawan <option title="SABAH -- Zon 9 - Sipitang, Membakut, Beaufort, Kuala Penyu, Weston, Tenom, Long Pa Sia" value="SBH09" />SABAH -- Zon 9 - Sipitang, Membakut, Beaufort, Kuala Penyu, Weston, Tenom, Long Pa Sia <option title="SELANGOR -- Gombak,H.Selangor,Rawang, H.Langat,Sepang,Petaling, S.Alam" value="SGR01" />SELANGOR -- Gombak,H.Selangor,Rawang, H.Langat,Sepang,Petaling, S.Alam <option title="SELANGOR -- Sabak Bernam, Kuala Selangor, Klang, Kuala Langat" value="SGR02" />SELANGOR -- Sabak Bernam, Kuala Selangor, Klang, Kuala Langat <option title="KUALA LUMPUR -- Wilayah Persekutuan Kuala Lumpur" value="SGR03" />KUALA LUMPUR -- Wilayah Persekutuan Kuala Lumpur <option title="PUTRAJAYA -- Wilayah Persekutuan Putrajaya" value="SGR04" />PUTRAJAYA -- Wilayah Persekutuan Putrajaya <option title="SARAWAK -- Zon 1 - Limbang, Sundar, Terusan, Lawas" value="SWK01" />SARAWAK -- Zon 1 - Limbang, Sundar, Terusan, Lawas <option title="SARAWAK -- Zon 2 - Niah, Belaga, Sibuti, Miri, Bekenu, Marudi" value="SWK02" />SARAWAK -- Zon 2 - Niah, Belaga, Sibuti, Miri, Bekenu, Marudi <option title="SARAWAK -- Zon 3 - Song, Belingan, Sebauh, Bintulu, Tatau, Kapit" value="SWK03" />SARAWAK -- Zon 3 - Song, Belingan, Sebauh, Bintulu, Tatau, Kapit <option title="SARAWAK -- Zon 4 - Igan, Kanowit, Sibu, Dalat, Oya" value="SWK04" />SARAWAK -- Zon 4 - Igan, Kanowit, Sibu, Dalat, Oya <option title="SARAWAK -- Zon 5 - Belawai, Matu, Daro, Sarikei, Julau, Bitangor, Rajang" value="SWK05" />SARAWAK -- Zon 5 - Belawai, Matu, Daro, Sarikei, Julau, Bitangor, Rajang <option title="SARAWAK -- Zon 6 - Kabong, Lingga, Sri Aman, Engkelili, Betong, Spaoh, Pusa, Saratok, Roban, Debak" value="SWK06" />SARAWAK -- Zon 6 - Kabong, Lingga, Sri Aman, Engkelili, Betong, Spaoh, Pusa, Saratok, Roban, Debak <option title="SARAWAK -- Zon 7 - Samarahan, Simunjan, Serian, Sebuyau, Meludam" value="SWK07" />SARAWAK -- Zon 7 - Samarahan, Simunjan, Serian, Sebuyau, Meludam <option title="SARAWAK -- Zon 8 - Kuching, Bau, Lundu,Sematan" value="SWK08" />SARAWAK -- Zon 8 - Kuching, Bau, Lundu,Sematan <option title="SARAWAK -- Zon 9 - Zon Khas" value="SWK09" />SARAWAK -- Zon 9 - Zon Khas <option title="TERENGGANU -- Kuala Terengganu, Marang" value="TRG01" />TERENGGANU -- Kuala Terengganu, Marang <option title="TERENGGANU -- Besut, Setiu" value="TRG02" />TERENGGANU -- Besut, Setiu <option title="TERENGGANU -- Hulu Terengganu" value="TRG03" />TERENGGANU -- Hulu Terengganu <option title="TERENGGANU -- Kemaman Dungun" value="TRG04" />TERENGGANU -- Kemaman Dungun <option title="LABUAN -- Wilayah Persekutuan Labuan" value="WLY02" />LABUAN -- Wilayah Persekutuan Labuan </select> <div id='solatwid'></div> <script> var zon = 'sgr03'; function solat(zon) {widget = '<iframe scrolling="no" frameborder="0" marginheight="0" marginwidth="" src="https://www.e-solat.gov.my/portalassets/www2/solat.php?kod=' + zon + '&lang=BM&url=http:/www.islam.gov.my" ></iframe>'; document.getElementById('solatwid').innerHTML = widget; }; solat(zon); </script> <style> #solatdiv {overflow:hidden;text-align:center; max-width:274px; font-size:10px;} #solatdiv select {width:100%; margin:0 0 -2px 0; background:#777; border: 1px solid #666; padding: 5px 0; font-family: 'trebuchet ms'; color: #fff;} #solatdiv option {width:100%;} #solatdiv iframe {width:105%; height:297px;} #solatwid {height:297px;margin-left:-14px;overflow:hidden} #solatbtm {padding:0; margin: 0 -1px -2px 4px;} </style> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div id='solatdiv'> <data:content/> <div id='solatbtm'> </div> <span>Dapatkan <a href="https://www.malaysiatercinta.com/2014/03/widget-waktu-solat-untuk-blog.html" target="_blank">widget waktu solat</a> ini</span> </div> <b:include name='quickedit'/> </b:includable>
Pilih blog yang nak diletakkan widget. Boleh juga tukar tajuk widget jika anda mahu.
Seterusnya klik butang Add Widget untuk tambah widget waktu solat ke dalam blog anda.
Anda akan dibawa ke paparan Layout, untuk tujuan menyemak kedudukan widget yang telah ditambah. Jika ingin mengalihnya, anda hanya perlu drag dari lokasi asal dan drop di lokasi baru. Akhir sekali klik butang (warna oren) Save Arrangement.
Layari blog anda dan lihat hasilnya.