☣ Cara Membuat Tools Jadwal Sholat di Blogger & WordPress

Jadwal sholat adalah salah satu hal yang sangat penting dalam kehidupan seorang muslim. Di era digital, kita bisa menambahkan tools jadwal sholat otomatis langsung ke blog. Dengan begitu, pengunjung tidak hanya membaca artikel, tetapi juga mendapatkan manfaat tambahan berupa informasi waktu sholat yang akurat. Artikel ini akan membahas secara lengkap cara membuat, memasang, dan mengoptimalkan tools jadwal sholat untuk Blogger maupun WordPress.

1. Mengapa Perlu Menambahkan Jadwal Sholat di Blog?

Ada banyak alasan mengapa jadwal sholat penting ditambahkan pada blog:

Mengingatkan pengunjung: Membantu setiap orang agar tidak lupa waktu sholat.
Konten Islami bernilai: Blog terlihat lebih bermanfaat, apalagi jika tema blog berhubungan dengan Islam.
Engagement tinggi: Tools interaktif membuat pengunjung betah.
SEO friendly: Kata kunci “jadwal sholat hari ini” punya nilai pencarian tinggi di Google.

2. Konsep Dasar Membuat Tools Jadwal Sholat

Sebelum membuat kode, pahami alur dasarnya:

Data: Ambil jadwal sholat dari API (misalnya API Aladhan atau MyQuran).
Script: Gunakan JavaScript untuk mengambil data dari API.
Container: Buat elemen HTML sebagai tempat menampilkan jadwal.
Styling: Atur tampilan dengan CSS agar serasi dengan tema blog.

3. Persiapan Sebelum Membuat Tools

Punya akses edit HTML di Blogger/WordPress.
Menentukan API gratis yang akan digunakan.
Desain sederhana: tabel, kartu, atau list.
Mendukung dark mode agar nyaman dilihat di semua tema.

4. Template Dasar Script Jadwal Sholat

Berikut adalah kerangka kosong yang bisa kamu isi sendiri. Saya buat dalam format <pre><code> agar mudah disalin:


<!-- ====== PRAYER TIMES WIDGET – AlAdhan API (Free, no key) ====== -->
<section id="prayer-widget" class="pw-container" translate="no">
  <header class="pw-header">
    <div class="pw-title">
      <span class="pw-emoji">🕌</span>
      <h2>Jadwal Sholat Hari Ini</h2>
    </div>
    <div class="pw-caption">
      <span id="pw-date-local"></span> · <span id="pw-hijri"></span>
    </div>
  </header>

  <div class="pw-controls">
    <label>
      Kota:
      <input type="text" id="pw-city" placeholder="Misal: Jakarta" />
    </label>
    <button id="pw-refresh">🔄 Refresh</button>
  </div>

  <ul class="pw-list">
    <li>Subuh: <span id="pw-fajr">--:--</span></li>
    <li>Dzuhur: <span id="pw-dhuhr">--:--</span></li>
    <li>Ashar: <span id="pw-asr">--:--</span></li>
    <li>Maghrib: <span id="pw-maghrib">--:--</span></li>
    <li>Isya: <span id="pw-isha">--:--</span></li>
  </ul>

  <footer class="pw-footer">
    <small>
      Sumber data: <a href="https://aladhan.com/prayer-times-api" target="_blank" rel="noopener">AlAdhan API</a> ·
      Zona: <span id="pw-tz">—</span>
    </small>
  </footer>
</section>

<style>
  :root {
    --bg: #ffffff;
    --fg: #222222;
    --accent: #0066cc;
  }
  [data-theme="dark"] {
    --bg: #1a1a1a;
    --fg: #f1f1f1;
    --accent: #3399ff;
  }
  .pw-container {
    max-width: 400px;
    margin: 1em auto;
    padding: 1em;
    border-radius: 12px;
    background: var(--bg);
    color: var(--fg);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    font-family: system-ui, sans-serif;
  }
  .pw-header { text-align: center; margin-bottom: .5em; }
  .pw-title { display: flex; align-items: center; justify-content: center; gap: .3em; }
  .pw-emoji { font-size: 1.5em; }
  .pw-caption { font-size: .9em; opacity: .8; }
  .pw-controls {
    display: flex; gap: .5em; justify-content: center; margin: .8em 0;
  }
  .pw-controls input {
    padding: .3em .5em;
    border: 1px solid #ccc;
    border-radius: 6px;
  }
  .pw-controls button {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .4em .8em;
    cursor: pointer;
  }
  .pw-controls button:disabled { opacity: .5; cursor: wait; }
  .pw-list { list-style: none; padding: 0; margin: 1em 0; }
  .pw-list li {
    display: flex; justify-content: space-between;
    padding: .3em 0; border-bottom: 1px dashed #ccc;
  }
  .pw-footer { text-align: center; font-size: .8em; opacity: .7; }
  .pw-footer a { color: var(--accent); text-decoration: none; }
</style>

<script>
(function(){
  const $ = (sel) => document.querySelector(sel);
  const apiBase = "https://api.aladhan.com/v1/timingsByCity";

  function todayStr(){
    const d = new Date();
    return d.toLocaleDateString("id-ID",{weekday:"long", day:"numeric", month:"long", year:"numeric"});
  }

  function load(city="Jakarta", country="Indonesia"){
    $("#pw-refresh").disabled = true;
    $("#pw-date-local").textContent = todayStr();
    fetch(`${apiBase}?city=${city}&country=${country}&method=2`)
      .then(r => r.json())
      .then(d => {
        const t = d.data.timings, meta = d.data.meta;
        $("#pw-fajr").textContent = t.Fajr;
        $("#pw-dhuhr").textContent = t.Dhuhr;
        $("#pw-asr").textContent = t.Asr;
        $("#pw-maghrib").textContent = t.Maghrib;
        $("#pw-isha").textContent = t.Isha;
        $("#pw-tz").textContent = meta.timezone;
        $("#pw-hijri").textContent = d.data.date.hijri.date;
      })
      .catch(e => alert("Gagal ambil data: "+e))
      .finally(() => { $("#pw-refresh").disabled = false; });
  }

  document.addEventListener("DOMContentLoaded", () => {
    load();
    $("#pw-refresh").onclick = () => {
      const city = $("#pw-city").value || "Jakarta";
      load(city);
    };
  });
})();
</script>
<!-- ====== END: PRAYER TIMES WIDGET ====== -->

5. Cara Menambahkan ke Blogger

Buka Dashboard Blogger.
Pilih menu Tata Letak.
Klik Tambahkan Gadget.
Pilih HTML/JavaScript.
Tempelkan script jadwal sholat.
Simpan lalu lihat hasil di blog.

6. Cara Menambahkan ke WordPress

6.1. Lewat Widget

Buka Tampilan → Widget.
Pilih Sidebar/Footer sesuai keinginan.
Tambahkan blok Custom HTML.
Tempel script jadwal sholat.

6.2. Lewat Halaman/Post

Buka editor halaman atau artikel.
Pilih blok Custom HTML.
Tempel script jadwal sholat.
Simpan lalu publish.

7. Mendesain Tampilan Jadwal Sholat

Supaya tampilannya menarik, kamu bisa pilih beberapa gaya:

Tabel sederhana: Cocok untuk jadwal harian.
Kartu modern: Setiap waktu sholat di kotak kecil.
List responsif: Ringan dan cepat dimuat.
Mode gelap: Gunakan CSS @media (prefers-color-scheme: dark).

8. SEO untuk Tools Jadwal Sholat

Jangan lupakan SEO agar blog lebih mudah ditemukan:

Gunakan kata kunci seperti “jadwal sholat hari ini”, “jam sholat subuh”, “waktu adzan”.
Buat meta deskripsi unik, misalnya: “Cek jadwal sholat terbaru setiap hari langsung dari blog ini, lengkap dan akurat.”
Tambahkan artikel pendukung yang membahas sholat dan waktunya.

9. Tips Tambahan

Buat dropdown untuk memilih kota.
Tambahkan jam real-time di atas jadwal.
Jika ingin, bisa pasang notifikasi suara adzan.
Optimalkan kecepatan dengan script async dan versi minify.

10. Kesimpulan

Membuat tools jadwal sholat untuk Blogger dan WordPress sebenarnya sederhana. Kamu hanya perlu data API, script JavaScript, wadah HTML, dan desain CSS. Dengan sedikit penyesuaian, tools ini bisa tampil indah di blog, bermanfaat untuk pengunjung, serta mendukung branding islami. Semoga artikel panjang ini membantu, dan selamat mencoba membuat widget jadwal sholat di blog kamu!

SmileYourSystem