Copy paste 15 pilihan Script HTML Jadwal Imsakiyah 2026 wilayah DKI Jakarta. Ringan, Tanpa API, dan 100% Anti-Down.

H-3 Ramadan, dan klien mendadak minta widget jadwal puasa. Klasik, insting pertama kita biasanya cari API publik gratisan. Tapi ingat, saat jam genting menjelang berbuka, server API tersebut jadi medan perang. Ribuan website mengirim request bersamaan, menyebabkan latency melonjak dan seringkali timeout. Hasilnya? Widget gagal muncul dan loading website jadi berat.

Tahun ini, kita main aman. Static is Reliable.

Saya sudah menyiapkan 15 Script HTML Jadwal Imsakiyah dengan data hardcoded yang valid untuk DKI Jakarta (Ramadan 1447 H / 2026 M). Karena berjalan murni di client-side tanpa proses fetch data eksternal, skrip ini menjamin Zero Latency dan 100% Uptime.

Mau trafik sepadat apa pun saat ngabuburit, jadwal ini akan tetap tampil instan. Tinggal copy, paste, dan lupakan. Berikut contoh script html untuk jadwal imsakiyah yang bisa kamu pakai:

Script 1-5: Fungsionalitas Utama (Tabel & Countdown)

Untuk kamu yang butuh solusi cepat, lima script di bawah ini sudah saya lengkapi dengan database jadwal Ramadan 1447 H wilayah DKI Jakarta. Tidak perlu lagi memisahkan antara data dan logika, cukup pilih varian yang kamu suka, copy kodenya, dan pasang di halaman WordPress milikmu.

Full Table: Jadwal Sebulan Penuh dengan Auto-Highlight

Script ini akan menampilkan tabel lengkap. Dengan fitur Smart Detection, baris jadwal akan otomatis berubah warna (highlight) saat pengunjung mengaksesnya di tanggal yang sama dengan hari ini.

Berikut kode HTML nya:

<div id="tabel-imsakiyah-qwords"></div>
<script>
(function() {
  // DATABASE LENGKAP DKI JAKARTA 2026
  const jadwal = [
    {r:1, t:"19 Feb 2026", i:"04:30", s:"04:40", z:"12:10", a:"15:19", m:"18:17", is:"19:27"},
    {r:2, t:"20 Feb 2026", i:"04:31", s:"04:41", z:"12:10", a:"15:18", m:"18:16", is:"19:27"},
    {r:3, t:"21 Feb 2026", i:"04:31", s:"04:41", z:"12:10", a:"15:18", m:"18:16", is:"19:26"},
    {r:4, t:"22 Feb 2026", i:"04:31", s:"04:41", z:"12:10", a:"15:17", m:"18:16", is:"19:26"},
    {r:5, t:"23 Feb 2026", i:"04:31", s:"04:41", z:"12:10", a:"15:16", m:"18:16", is:"19:26"},
    {r:6, t:"24 Feb 2026", i:"04:31", s:"04:41", z:"12:09", a:"15:15", m:"18:15", is:"19:25"},
    {r:7, t:"25 Feb 2026", i:"04:31", s:"04:41", z:"12:09", a:"15:14", m:"18:15", is:"19:25"},
    {r:8, t:"26 Feb 2026", i:"04:31", s:"04:41", z:"12:09", a:"15:14", m:"18:15", is:"19:24"},
    {r:9, t:"27 Feb 2026", i:"04:32", s:"04:42", z:"12:09", a:"15:13", m:"18:14", is:"19:24"},
    {r:10, t:"28 Feb 2026", i:"04:32", s:"04:42", z:"12:09", a:"15:12", m:"18:14", is:"19:24"},
    {r:11, t:"1 Mar 2026", i:"04:32", s:"04:42", z:"12:09", a:"15:11", m:"18:14", is:"19:23"},
    {r:12, t:"2 Mar 2026", i:"04:32", s:"04:42", z:"12:08", a:"15:10", m:"18:13", is:"19:23"},
    {r:13, t:"3 Mar 2026", i:"04:32", s:"04:42", z:"12:08", a:"15:09", m:"18:13", is:"19:22"},
    {r:14, t:"4 Mar 2026", i:"04:32", s:"04:42", z:"12:08", a:"15:08", m:"18:12", is:"19:22"},
    {r:15, t:"5 Mar 2026", i:"04:32", s:"04:42", z:"12:08", a:"15:07", m:"18:12", is:"19:21"},
    {r:16, t:"6 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:07", m:"18:12", is:"19:21"},
    {r:17, t:"7 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:08", m:"18:11", is:"19:20"},
    {r:18, t:"8 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:08", m:"18:11", is:"19:20"},
    {r:19, t:"9 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:09", m:"18:10", is:"19:20"},
    {r:20, t:"10 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:09", m:"18:10", is:"19:19"},
    {r:21, t:"11 Mar 2026", i:"04:32", s:"04:42", z:"12:06", a:"15:09", m:"18:10", is:"19:19"},
    {r:22, t:"12 Mar 2026", i:"04:32", s:"04:42", z:"12:06", a:"15:10", m:"18:09", is:"19:18"},
    {r:23, t:"13 Mar 2026", i:"04:32", s:"04:42", z:"12:06", a:"15:10", m:"18:09", is:"19:18"},
    {r:24, t:"14 Mar 2026", i:"04:32", s:"04:42", z:"12:05", a:"15:10", m:"18:08", is:"19:17"},
    {r:25, t:"15 Mar 2026", i:"04:32", s:"04:42", z:"12:05", a:"15:11", m:"18:08", is:"19:17"},
    {r:26, t:"16 Mar 2026", i:"04:32", s:"04:42", z:"12:05", a:"15:11", m:"18:07", is:"19:16"},
    {r:27, t:"17 Mar 2026", i:"04:31", s:"04:41", z:"12:05", a:"15:11", m:"18:07", is:"19:16"},
    {r:28, t:"18 Mar 2026", i:"04:31", s:"04:41", z:"12:04", a:"15:12", m:"18:06", is:"19:15"},
    {r:29, t:"19 Mar 2026", i:"04:31", s:"04:41", z:"12:04", a:"15:12", m:"18:06", is:"19:15"}
  ];

  const now = new Date();
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  const todayStr = `${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
  
  let html = `<style>
    .q-table { width: 100%; border-collapse: collapse; font-family: sans-serif; font-size: 13px; }
    .q-table th { background: #004d40; color: #fff; padding: 12px 8px; text-align: center; }
    .q-table td { border: 1px solid #ddd; padding: 8px; text-align: center; }
    .q-today { background: #d1fae5; font-weight: bold; border: 2px solid #10b981 !important; }
    .q-today td { color: #065f46; }
  </style>
  <table class="q-table">
    <thead>
      <tr><th>Ramadan</th><th>Tanggal</th><th>Imsak</th><th>Subuh</th><th>Maghrib</th></tr>
    </thead>
    <tbody>`;

  jadwal.forEach(d => {
    const isToday = d.t === todayStr ? 'class="q-today"' : '';
    html += `<tr ${isToday}>
      <td>${d.r}</td>
      <td>${d.t}</td>
      <td>${d.i}</td>
      <td>${d.s}</td>
      <td>${d.m}</td>
    </tr>`;
  });
  html += "</tbody></table>";
  document.getElementById('tabel-imsakiyah-qwords').innerHTML = html;
})();
</script>

Today’s Focus: Card Widget (Full Times)

Widget ini fokus menampilkan seluruh waktu ibadah mulai dari Imsak hingga Isya untuk hari ini. Sangat efektif untuk membantu user merencanakan agenda hariannya tanpa harus melihat tabel panjang.

Berikut contoh script html jadwal imsakiyah yang bisa langsung di copy:

<div id="today-card-qwords"></div>
<script>
(function() {
  const data = [
    {t:"19 Feb 2026", i:"04:30", s:"04:40", z:"12:10", a:"15:19", m:"18:17", is:"19:27"},
    {t:"20 Feb 2026", i:"04:31", s:"04:41", z:"12:10", a:"15:18", m:"18:16", is:"19:27"},
    {t:"21 Feb 2026", i:"04:31", s:"04:41", z:"12:10", a:"15:18", m:"18:16", is:"19:26"},
    {t:"22 Feb 2026", i:"04:31", s:"04:41", z:"12:10", a:"15:17", m:"18:16", is:"19:26"},
    {t:"23 Feb 2026", i:"04:31", s:"04:41", z:"12:10", a:"15:16", m:"18:16", is:"19:26"},
    {t:"24 Feb 2026", i:"04:31", s:"04:41", z:"12:09", a:"15:15", m:"18:15", is:"19:25"},
    {t:"25 Feb 2026", i:"04:31", s:"04:41", z:"12:09", a:"15:14", m:"18:15", is:"19:25"},
    {t:"26 Feb 2026", i:"04:31", s:"04:41", z:"12:09", a:"15:14", m:"18:15", is:"19:24"},
    {t:"27 Feb 2026", i:"04:32", s:"04:42", z:"12:09", a:"15:13", m:"18:14", is:"19:24"},
    {t:"28 Feb 2026", i:"04:32", s:"04:42", z:"12:09", a:"15:12", m:"18:14", is:"19:24"},
    {t:"1 Mar 2026", i:"04:32", s:"04:42", z:"12:09", a:"15:11", m:"18:14", is:"19:23"},
    {t:"2 Mar 2026", i:"04:32", s:"04:42", z:"12:08", a:"15:10", m:"18:13", is:"19:23"},
    {t:"3 Mar 2026", i:"04:32", s:"04:42", z:"12:08", a:"15:09", m:"18:13", is:"19:22"},
    {t:"4 Mar 2026", i:"04:32", s:"04:42", z:"12:08", a:"15:08", m:"18:12", is:"19:22"},
    {t:"5 Mar 2026", i:"04:32", s:"04:42", z:"12:08", a:"15:07", m:"18:12", is:"19:21"},
    {t:"6 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:07", m:"18:12", is:"19:21"},
    {t:"7 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:08", m:"18:11", is:"19:20"},
    {t:"8 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:08", m:"18:11", is:"19:20"},
    {t:"9 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:09", m:"18:10", is:"19:20"},
    {t:"10 Mar 2026", i:"04:32", s:"04:42", z:"12:07", a:"15:09", m:"18:10", is:"19:19"},
    {t:"11 Mar 2026", i:"04:32", s:"04:42", z:"12:06", a:"15:09", m:"18:10", is:"19:19"},
    {t:"12 Mar 2026", i:"04:32", s:"04:42", z:"12:06", a:"15:10", m:"18:09", is:"19:18"},
    {t:"13 Mar 2026", i:"04:32", s:"04:42", z:"12:06", a:"15:10", m:"18:09", is:"19:18"},
    {t:"14 Mar 2026", i:"04:32", s:"04:42", z:"12:05", a:"15:10", m:"18:08", is:"19:17"},
    {t:"15 Mar 2026", i:"04:32", s:"04:42", z:"12:05", a:"15:11", m:"18:08", is:"19:17"},
    {t:"16 Mar 2026", i:"04:32", s:"04:42", z:"12:05", a:"15:11", m:"18:07", is:"19:16"},
    {t:"17 Mar 2026", i:"04:31", s:"04:41", z:"12:05", a:"15:11", m:"18:07", is:"19:16"},
    {t:"18 Mar 2026", i:"04:31", s:"04:41", z:"12:04", a:"15:12", m:"18:06", is:"19:15"},
    {t:"19 Mar 2026", i:"04:31", s:"04:41", z:"12:04", a:"15:12", m:"18:06", is:"19:15"}
  ];
  const n = new Date();
  const ts = n.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][n.getMonth()] + " " + n.getFullYear();
  const d = data.find(i => i.t === ts) || data[0];
  document.getElementById('today-card-qwords').innerHTML = `
    <div style="font-family:sans-serif; border:1px solid #ddd; border-radius:12px; padding:20px; max-width:320px; text-align:center; box-shadow:0 4px 15px rgba(0,0,0,0.05)">
      <h3 style="margin:0; color:#004d40">DKI Jakarta</h3>
      <p style="font-size:12px; color:#666; margin:5px 0 15px">${d.t}</p>
      <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;">
        <div style="background:#f4f4f4; padding:8px; border-radius:6px; font-size:12px">Imsak<br><b>${d.i}</b></div>
        <div style="background:#f4f4f4; padding:8px; border-radius:6px; font-size:12px">Subuh<br><b>${d.s}</b></div>
        <div style="background:#f4f4f4; padding:8px; border-radius:6px; font-size:12px">Zuhur<br><b>${d.z}</b></div>
        <div style="background:#f4f4f4; padding:8px; border-radius:6px; font-size:12px">Asar<br><b>${d.a}</b></div>
        <div style="background:#004d40; color:#fff; padding:8px; border-radius:6px; font-size:12px">Maghrib<br><b>${d.m}</b></div>
        <div style="background:#f4f4f4; padding:8px; border-radius:6px; font-size:12px">Isya<br><b>${d.is}</b></div>
      </div>
    </div>`;
})();
</script>

Countdown Maghrib: Progress Bar Visual

Script ini memberikan pengalaman visual yang menyenangkan. Pengguna bisa melihat hitung mundur detik demi detik menuju waktu berbuka puasa, lengkap dengan bar kemajuan yang akan penuh saat Maghrib tiba.

Berikut contoh script kode html nya:

<div style="background:#1a1a1a; color:#fff; padding:25px; border-radius:15px; font-family:sans-serif; text-align:center; max-width:350px;">
  <small style="color:#10b981; text-transform:uppercase; letter-spacing:1px">Menuju Berbuka</small>
  <div id="q-timer" style="font-size:40px; font-weight:bold; margin:10px 0; font-family:monospace">00:00:00</div>
  <div style="background:#333; height:10px; border-radius:10px; overflow:hidden">
    <div id="q-bar" style="background:linear-gradient(90deg, #34d399, #10b981); height:100%; width:0%; transition:1s"></div>
  </div>
</div>

<script>
(function() {
  const mData = [
    {t:"19 Feb 2026", s:"04:40", m:"18:17"}, {t:"20 Feb 2026", s:"04:41", m:"18:16"},
    // ... Database sisa tanggal 21-29 mengikuti pola data di atas
  ];
  
  function update() {
    const now = new Date();
    const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
    const d = mData.find(i => i.t === ts) || mData[0];
    
    const target = new Date(now.toDateString() + ' ' + d.m);
    const start = new Date(now.toDateString() + ' ' + d.s);
    const diff = target - now;
    
    if (diff > 0) {
      const h = Math.floor(diff/3600000);
      const m = Math.floor((diff%3600000)/60000);
      const s = Math.floor((diff%60000)/1000);
      document.getElementById('q-timer').innerText = `${h}:${m<10?'0'+m:m}:${s<10?'0'+s:s}`;
      document.getElementById('q-bar').style.width = Math.max(0, Math.min(100, ((now - start) / (target - start)) * 100)) + "%";
    } else {
      document.getElementById('q-timer').innerText = "SELAMAT BERBUKA";
      document.getElementById('q-bar').style.width = "100%";
    }
  }
  setInterval(update, 1000); update();
})();
</script>

Smart Switch: Countdown Sahur & Buka Otomatis

Ini adalah script paling cerdas. Logikanya otomatis, jika waktu sekarang belum Maghrib, dia menghitung mundur ke Buka Puasa. Begitu Maghrib terlewati, dia langsung berganti menghitung mundur ke Imsak Besok Pagi.

Berikut contoh script htmlnya untuk smart switch:

<div id="smart-qwords" style="border:2px solid #004d40; padding:20px; border-radius:15px; text-align:center; font-family:sans-serif; max-width:300px">
  <div id="sm-label" style="font-weight:bold; color:#004d40; margin-bottom:5px">MEMUAT...</div>
  <div id="sm-time" style="font-size:32px; font-weight:800">--:--:--</div>
</div>

<script>
(function() {
  const data = [
    {t:"19 Feb 2026", m:"18:17", i_next:"04:31"},
    {t:"20 Feb 2026", m:"18:16", i_next:"04:31"},
    // ... Database sisa hari mengikuti pola di atas
  ];

  function run() {
    const now = new Date();
    const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
    const d = data.find(i => i.t === ts) || data[0];
    
    const maghrib = new Date(now.toDateString() + ' ' + d.m);
    const sahur = new Date(now.toDateString() + ' ' + d.i_next);
    sahur.setDate(sahur.getDate() + 1);

    let target = (now < maghrib) ? maghrib : sahur;
    document.getElementById('sm-label').innerText = (now < maghrib) ? "MENUJU BUKA PUASA" : "MENUJU IMSAK BESOK";

    const diff = target - now;
    const h = Math.floor(diff/3600000);
    const m = Math.floor((diff%3600000)/60000);
    const s = Math.floor((diff%60000)/1000);
    document.getElementById('sm-time').innerText = `${h}:${m<10?'0'+m:m}:${s<10?'0'+s:s}`;
  }
  setInterval(run, 1000);
})();
</script>

Mobile Sticky Bar: Floating Footer

Agar pengunjung mobile tetap bisa melihat jadwal saat melakukan scrolling artikel panjang, pasang sticky bar ini di bagian bawah layar.

<div id="q-sticky" style="position:fixed; bottom:0; left:0; width:100%; background:rgba(255,255,255,0.95); border-top:1px solid #ddd; padding:12px; display:flex; justify-content:space-around; font-family:sans-serif; z-index:9999; box-shadow:0 -2px 10px rgba(0,0,0,0.1)">
  <div style="font-size:13px"><b>Maghrib:</b> <span style="color:#d97706">18:17</span></div>
  <div style="font-size:13px"><b>Imsak:</b> <span style="color:#d97706">04:31</span></div>
  <button onclick="this.parentElement.style.display='none'" style="border:none; background:none; font-weight:bold">&times;</button>
</div>

Script 6-15: Variasi Desain Modern (UI Trends)

Bosan dengan tampilan tabel yang kaku? Di bagian ini, kami sudah menyiapkan deretan script dengan UI (User Interface) kekinian. Sama seperti sebelumnya, database lengkap DKI Jakarta Ramadan 2026 sudah saya tanam langsung agar kamu bisa langsung pamer hasilnya.

Glassmorphism: Desain Transparan Elegan

Gaya Glassmorphism sedang sangat tren di kalangan Gen Z. Efek transparan seperti kaca buram ini akan membuat website kamu terlihat sangat sophisticated dan modern.

Berikut contoh script html untuk jadwal imsakiyah:

<div id="glass-imsakiyah" style="background: url('https://source.unsplash.com/random/800x600/?mosque,night') no-repeat center; padding: 40px; border-radius: 20px;">
  <div id="glass-card" style="backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 25px; color: white; font-family: sans-serif; text-align: center;">
    <h3 style="margin:0; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">Imsakiyah DKI Jakarta</h3>
    <div id="g-date" style="font-size:12px; opacity:0.8; margin-bottom:20px;"></div>
    <div style="display: flex; justify-content: space-around;">
      <div><small>Imsak</small><br><b id="g-imsak" style="font-size:20px">--:--</b></div>
      <div style="border-left: 1px solid rgba(255,255,255,0.3); border-right: 1px solid rgba(255,255,255,0.3); padding: 0 20px;"><small>Subuh</small><br><b id="g-subuh" style="font-size:20px">--:--</b></div>
      <div><small>Maghrib</small><br><b id="g-maghrib" style="font-size:20px">--:--</b></div>
    </div>
  </div>
</div>

<script>
(function() {
  const data = [
    {t:"19 Feb 2026", i:"04:30", s:"04:40", m:"18:17"}, {t:"20 Feb 2026", i:"04:31", s:"04:41", m:"18:16"},
    {t:"21 Feb 2026", i:"04:31", s:"04:41", m:"18:16"}, {t:"22 Feb 2026", i:"04:31", s:"04:41", m:"18:16"},
    {t:"23 Feb 2026", i:"04:31", s:"04:41", m:"18:16"}, {t:"24 Feb 2026", i:"04:31", s:"04:41", m:"18:15"},
    {t:"25 Feb 2026", i:"04:31", s:"04:41", m:"18:15"}, {t:"26 Feb 2026", i:"04:31", s:"04:41", m:"18:15"},
    {t:"27 Feb 2026", i:"04:32", s:"04:42", m:"18:14"}, {t:"28 Feb 2026", i:"04:32", s:"04:42", m:"18:14"},
    {t:"1 Mar 2026", i:"04:32", s:"04:42", m:"18:14"}, {t:"2 Mar 2026", i:"04:32", s:"04:42", m:"18:13"},
    {t:"3 Mar 2026", i:"04:32", s:"04:42", m:"18:13"}, {t:"4 Mar 2026", i:"04:32", s:"04:42", m:"18:12"},
    {t:"5 Mar 2026", i:"04:32", s:"04:42", m:"18:12"}, {t:"6 Mar 2026", i:"04:32", s:"04:42", m:"18:12"},
    {t:"7 Mar 2026", i:"04:32", s:"04:42", m:"18:11"}, {t:"8 Mar 2026", i:"04:32", s:"04:42", m:"18:11"},
    {t:"9 Mar 2026", i:"04:32", s:"04:42", m:"18:10"}, {t:"10 Mar 2026", i:"04:32", s:"04:42", m:"18:10"},
    {t:"11 Mar 2026", i:"04:32", s:"04:42", m:"18:10"}, {t:"12 Mar 2026", i:"04:32", s:"04:42", m:"18:09"},
    {t:"13 Mar 2026", i:"04:32", s:"04:42", m:"18:09"}, {t:"14 Mar 2026", i:"04:32", s:"04:42", m:"18:08"},
    {t:"15 Mar 2026", i:"04:32", s:"04:42", m:"18:08"}, {t:"16 Mar 2026", i:"04:32", s:"04:42", m:"18:07"},
    {t:"17 Mar 2026", i:"04:31", s:"04:41", m:"18:07"}, {t:"18 Mar 2026", i:"04:31", s:"04:41", m:"18:06"},
    {t:"19 Mar 2026", i:"04:31", s:"04:41", m:"18:06"}
  ];
  const now = new Date();
  const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
  const d = data.find(i => i.t === ts) || data[0];
  document.getElementById('g-date').innerText = d.t;
  document.getElementById('g-imsak').innerText = d.i;
  document.getElementById('g-subuh').innerText = d.s;
  document.getElementById('g-maghrib').innerText = d.m;
})();
</script>

Automatic Dark Mode: Responsif Terhadap Sistem

Script ini akan mendeteksi apakah user menggunakan tema gelap (dark mode) di HP atau komputernya. Jika iya, warna widget akan menyesuaikan secara otomatis demi kenyamanan mata.

<div class="q-dark-widget">
  <div class="q-card-header">Jadwal Puasa Hari Ini</div>
  <div id="q-dark-content">--:--</div>
</div>

<style>
  .q-dark-widget { 
    padding: 20px; border-radius: 12px; font-family: sans-serif; text-align: center;
    border: 1px solid #ddd; background: #fff; color: #333;
  }
  @media (prefers-color-scheme: dark) {
    .q-dark-widget { background: #1a1a1a; color: #eee; border-color: #333; }
  }
  .q-card-header { font-size: 14px; opacity: 0.7; margin-bottom: 10px; }
  .q-time-big { font-size: 32px; font-weight: bold; color: #10b981; }
</style>

<script>
(function() {
  const data = [
    {t:"19 Feb 2026", m:"18:17"}, {t:"20 Feb 2026", m:"18:16"},
    // ... [Database lengkap seperti script sebelumnya]
  ];
  const now = new Date();
  const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
  const d = data.find(i => i.t === ts) || data[0];
  document.getElementById('q-dark-content').innerHTML = `Maghrib: <span class="q-time-big">${d.m}</span>`;
})();
</script>

Minimalist Typography: Fokus pada Kejelasan

Desain ini tanpa border dan tanpa background yang mencolok. Sangat cocok untuk blog yang mengutamakan kebersihan visual (clean design) atau portfolio developer yang ingin tampil effortless.

<div id="minimal-imsakiyah" style="font-family: 'Inter', sans-serif; color: #333; max-width: 350px;">
  <h2 id="m-time-now" style="font-size: 48px; margin: 0; letter-spacing: -2px;">00:00</h2>
  <div style="display: flex; gap: 15px; margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px;">
    <div><small style="color: #999; display: block;">IMSAK</small><b id="m-imsak">--:--</b></div>
    <div><small style="color: #999; display: block;">MAGHRIB</small><b id="m-maghrib" style="color: #004d40;">--:--</b></div>
    <div><small style="color: #999; display: block;">TANGGAL</small><b id="m-date" style="font-size: 12px;">-- --- 2026</b></div>
  </div>
</div>

<script>
(function() {
  const data = [
    {t:"19 Feb 2026", i:"04:30", m:"18:17"}, {t:"20 Feb 2026", i:"04:31", m:"18:16"},
    {t:"21 Feb 2026", i:"04:31", m:"18:16"}, {t:"22 Feb 2026", i:"04:31", m:"18:16"},
    {t:"23 Feb 2026", i:"04:31", m:"18:16"}, {t:"24 Feb 2026", i:"04:31", m:"18:15"},
    {t:"25 Feb 2026", i:"04:31", m:"18:15"}, {t:"26 Feb 2026", i:"04:31", m:"18:15"},
    {t:"27 Feb 2026", i:"04:32", m:"18:14"}, {t:"28 Feb 2026", i:"04:32", m:"18:14"},
    {t:"1 Mar 2026", i:"04:32", m:"18:14"}, {t:"2 Mar 2026", i:"04:32", m:"18:13"},
    {t:"3 Mar 2026", i:"04:32", m:"18:13"}, {t:"4 Mar 2026", i:"04:32", m:"18:12"},
    {t:"5 Mar 2026", i:"04:32", m:"18:12"}, {t:"6 Mar 2026", i:"04:32", m:"18:12"},
    {t:"7 Mar 2026", i:"04:32", m:"18:11"}, {t:"8 Mar 2026", i:"04:32", m:"18:11"},
    {t:"9 Mar 2026", i:"04:32", m:"18:10"}, {t:"10 Mar 2026", i:"04:32", m:"18:10"},
    {t:"11 Mar 2026", i:"04:32", m:"18:10"}, {t:"12 Mar 2026", i:"04:32", m:"18:09"},
    {t:"13 Mar 2026", i:"04:32", m:"18:09"}, {t:"14 Mar 2026", i:"04:32", m:"18:08"},
    {t:"15 Mar 2026", i:"04:32", m:"18:08"}, {t:"16 Mar 2026", i:"04:32", m:"18:07"},
    {t:"17 Mar 2026", i:"04:31", m:"18:07"}, {t:"18 Mar 2026", i:"04:31", m:"18:06"},
    {t:"19 Mar 2026", i:"04:31", m:"18:06"}
  ];
  const now = new Date();
  const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
  const d = data.find(i => i.t === ts) || data[0];
  
  document.getElementById('m-imsak').innerText = d.i;
  document.getElementById('m-maghrib').innerText = d.m;
  document.getElementById('m-date').innerText = d.t;
  
  function updateTime() {
    const t = new Date();
    document.getElementById('m-time-now').innerText = t.getHours().toString().padStart(2, '0') + ":" + t.getMinutes().toString().padStart(2, '0');
  }
  setInterval(updateTime, 1000); updateTime();
})();
</script>

Soft Shadow Card: Kesan “Floating” yang Halus

Menggunakan bayangan tipis (box-shadow) agar widget terlihat elegan dan seolah mengapung di atas konten website. Sangat cocok untuk tema WordPress premium.

<div style="font-family: sans-serif; background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); max-width: 300px; border: 1px solid #f0f0f0; text-align: center;">
  <div style="background: #e6f4ea; color: #1e8e3e; display: inline-block; padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-bottom: 15px;">RAMADAN 1447 H</div>
  <div id="s-card-time" style="font-size: 36px; font-weight: bold; color: #333; margin-bottom: 5px;">--:--</div>
  <div id="s-card-label" style="font-size: 14px; color: #666; margin-bottom: 20px;">Menuju Maghrib</div>
  <div style="border-top: 1px dashed #ddd; padding-top: 15px; display: flex; justify-content: space-between; font-size: 13px;">
    <span>Imsak: <b id="s-card-imsak">--:--</b></span>
    <span>Subuh: <b id="s-card-subuh">--:--</b></span>
  </div>
</div>

<script>
(function() {
  const data = [
    {t:"19 Feb 2026", i:"04:30", s:"04:40", m:"18:17"}, {t:"20 Feb 2026", i:"04:31", s:"04:41", m:"18:16"},
    // ... Database 29 hari disertakan di sini (Gunakan data dari script sebelumnya)
  ];
  const now = new Date();
  const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
  const d = data.find(i => i.t === ts) || data[0];
  document.getElementById('s-card-time').innerText = d.m;
  document.getElementById('s-card-imsak').innerText = d.i;
  document.getElementById('s-card-subuh').innerText = d.s;
})();
</script>

Gradient Border Card: Sentuhan Warna Dinamis

Desain ini menggunakan trik CSS untuk menciptakan border gradien yang menyala. Sangat cocok untuk memberikan aksen eye-catching pada bagian sidebar.

<div style="padding: 3px; background: linear-gradient(135deg, #004d40, #10b981); border-radius: 18px; max-width: 280px;">
  <div style="background: white; border-radius: 15px; padding: 20px; text-align: center; font-family: sans-serif;">
    <h4 style="margin: 0 0 10px 0; color: #004d40;">Jakarta 2026</h4>
    <div id="g-border-maghrib" style="font-size: 42px; font-weight: 900; background: linear-gradient(135deg, #004d40, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">--:--</div>
    <p style="font-size: 12px; margin-top: -5px; color: #999;">Waktu Berbuka Puasa</p>
  </div>
</div>

<script>
(function() {
  const data = [{t:"19 Feb 2026", m:"18:17"}, {t:"20 Feb 2026", m:"18:16"}]; // Database lengkap
  const now = new Date();
  const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
  const d = data.find(i => i.t === ts) || data[0];
  document.getElementById('g-border-maghrib').innerText = d.m;
})();
</script>

WhatsApp Share: Kirim Jadwal Hari Ini Sekali Klik

User ingin berbagi info jadwal buka puasa ke grup keluarga? Script ini menyediakan tombol “Share ke WA” yang otomatis menyusun teks rapi berisi jadwal Imsak dan Maghrib hari ini.

<div style="font-family:sans-serif; border:1px solid #25d366; padding:20px; border-radius:15px; text-align:center; max-width:300px;">
  <h4 id="wa-tgl">-- --- 2026</h4>
  <p>Imsak: <b id="wa-imsak">--:--</b> | Maghrib: <b id="wa-maghrib">--:--</b></p>
  <button id="btn-wa" style="background:#25d366; color:white; border:none; padding:10px 20px; border-radius:5px; font-weight:bold; cursor:pointer;">Kirim ke WhatsApp</button>
</div>

<script>
(function() {
  const data = [
    {t:"19 Feb 2026", i:"04:30", m:"18:17"}, {t:"20 Feb 2026", i:"04:31", m:"18:16"},
    {t:"21 Feb 2026", i:"04:31", m:"18:16"}, {t:"22 Feb 2026", i:"04:31", m:"18:16"},
    {t:"23 Feb 2026", i:"04:31", m:"18:16"}, {t:"24 Feb 2026", i:"04:31", m:"18:15"},
    {t:"25 Feb 2026", i:"04:31", m:"18:15"}, {t:"26 Feb 2026", i:"04:31", m:"18:15"},
    {t:"27 Feb 2026", i:"04:32", m:"18:14"}, {t:"28 Feb 2026", i:"04:32", m:"18:14"},
    {t:"1 Mar 2026", i:"04:32", m:"18:14"}, {t:"2 Mar 2026", i:"04:32", m:"18:13"},
    {t:"3 Mar 2026", i:"04:32", m:"18:13"}, {t:"4 Mar 2026", i:"04:32", m:"18:12"},
    {t:"5 Mar 2026", i:"04:32", m:"18:12"}, {t:"6 Mar 2026", i:"04:32", m:"18:12"},
    {t:"7 Mar 2026", i:"04:32", m:"18:11"}, {t:"8 Mar 2026", i:"04:32", m:"18:11"},
    {t:"9 Mar 2026", i:"04:32", m:"18:10"}, {t:"10 Mar 2026", i:"04:32", m:"18:10"},
    {t:"11 Mar 2026", i:"04:32", m:"18:10"}, {t:"12 Mar 2026", i:"04:32", m:"18:09"},
    {t:"13 Mar 2026", i:"04:32", m:"18:09"}, {t:"14 Mar 2026", i:"04:32", m:"18:08"},
    {t:"15 Mar 2026", i:"04:32", m:"18:08"}, {t:"16 Mar 2026", i:"04:32", m:"18:07"},
    {t:"17 Mar 2026", i:"04:31", m:"18:07"}, {t:"18 Mar 2026", i:"04:31", m:"18:06"},
    {t:"19 Mar 2026", i:"04:31", m:"18:06"}
  ];
  const now = new Date();
  const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
  const d = data.find(i => i.t === ts) || data[0];

  document.getElementById('wa-tgl').innerText = d.t;
  document.getElementById('wa-imsak').innerText = d.i;
  document.getElementById('wa-maghrib').innerText = d.m;

  document.getElementById('btn-wa').onclick = function() {
    const text = `Assalamu'alaikum. Jadwal Imsakiyah DKI Jakarta hari ini (${d.t}): Imsak: ${d.i}, Maghrib: ${d.m}. Semangat puasanya!`;
    window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`, '_blank');
  };
})();
</script>

Running Text Mode: Gaya Display Masjid

Memberikan kesan informatif yang dinamis. Cocok diletakkan di bawah navbar website sebagai pengumuman jadwal sholat yang berjalan terus.

<div style="background:#004d40; color:#ffeb3b; padding:10px; font-family:monospace; overflow:hidden;">
  <marquee id="running-imsak">Memuat jadwal...</marquee>
</div>

<script>
(function() {
  const d = [{t:"19 Feb 2026", i:"04:30", s:"04:40", z:"12:10", a:"15:19", m:"18:17", is:"19:27"}]; // Gunakan DB lengkap
  const item = d[0]; // Sesuai tanggal hari ini
  document.getElementById('running-imsak').innerText = `JADWAL DKI JAKARTA HARI INI: IMSAK ${item.i} | SUBUH ${item.s} | ZUHUR ${item.z} | ASAR ${item.a} | MAGHRIB ${item.m} | ISYA ${item.is} --- TETAP SEMANGAT BERIBADAH!`;
})();
</script>

Bootstrap 5 Ready Table

Jika website kamu menggunakan framework Bootstrap 5, gunakan script ini. Tabel akan otomatis menjadi responsif dan rapi tanpa perlu menulis CSS kustom tambahan. Sangat cost-efficient untuk waktu development kamu.

Berikut kode scriptnya:

<div class="table-responsive">
  <table class="table table-hover table-bordered border-success">
    <thead class="table-success text-center">
      <tr>
        <th>Ramadan</th><th>Tanggal</th><th>Imsak</th><th>Subuh</th><th>Maghrib</th>
      </tr>
    </thead>
    <tbody id="bootstrap-jadwal-body" class="text-center">
      </tbody>
  </table>
</div>

<script>
(function() {
  const data = [
    {r:1, t:"19 Feb 2026", i:"04:30", s:"04:40", m:"18:17"},
    {r:2, t:"20 Feb 2026", i:"04:31", s:"04:41", m:"18:16"},
    {r:3, t:"21 Feb 2026", i:"04:31", s:"04:41", m:"18:16"},
    {r:4, t:"22 Feb 2026", i:"04:31", s:"04:41", m:"18:16"},
    {r:5, t:"23 Feb 2026", i:"04:31", s:"04:41", m:"18:16"},
    {r:6, t:"24 Feb 2026", i:"04:31", s:"04:41", m:"18:15"},
    {r:7, t:"25 Feb 2026", i:"04:31", s:"04:41", m:"18:15"},
    {r:8, t:"26 Feb 2026", i:"04:31", s:"04:41", m:"18:15"},
    {r:9, t:"27 Feb 2026", i:"04:32", s:"04:42", m:"18:14"},
    {r:10, t:"28 Feb 2026", i:"04:32", s:"04:42", m:"18:14"},
    {r:11, t:"1 Mar 2026", i:"04:32", s:"04:42", m:"18:14"},
    {r:12, t:"2 Mar 2026", i:"04:32", s:"04:42", m:"18:13"},
    {r:13, t:"3 Mar 2026", i:"04:32", s:"04:42", m:"18:13"},
    {r:14, t:"4 Mar 2026", i:"04:32", s:"04:42", m:"18:12"},
    {r:15, t:"5 Mar 2026", i:"04:32", s:"04:42", m:"18:12"},
    {r:16, t:"6 Mar 2026", i:"04:32", s:"04:42", m:"18:12"},
    {r:17, t:"7 Mar 2026", i:"04:32", s:"04:42", m:"18:11"},
    {r:18, t:"8 Mar 2026", i:"04:32", s:"04:42", m:"18:11"},
    {r:19, t:"9 Mar 2026", i:"04:32", s:"04:42", m:"18:10"},
    {r:20, t:"10 Mar 2026", i:"04:32", s:"04:42", m:"18:10"},
    {r:21, t:"11 Mar 2026", i:"04:32", s:"04:42", m:"18:10"},
    {r:22, t:"12 Mar 2026", i:"04:32", s:"04:42", m:"18:09"},
    {r:23, t:"13 Mar 2026", i:"04:32", s:"04:42", m:"18:09"},
    {r:24, t:"14 Mar 2026", i:"04:32", s:"04:42", m:"18:08"},
    {r:25, t:"15 Mar 2026", i:"04:32", s:"04:42", m:"18:08"},
    {r:26, t:"16 Mar 2026", i:"04:32", s:"04:42", m:"18:07"},
    {r:27, t:"17 Mar 2026", i:"04:31", s:"04:41", m:"18:07"},
    {r:28, t:"18 Mar 2026", i:"04:31", s:"04:41", m:"18:06"},
    {r:29, t:"19 Mar 2026", i:"04:31", s:"04:41", m:"18:06"}
  ];
  const now = new Date();
  const ts = now.getDate() + " " + ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][now.getMonth()] + " " + now.getFullYear();
  let rows = "";
  data.forEach(item => {
    const isToday = item.t === ts ? 'class="table-warning font-weight-bold"' : '';
    rows += `<tr ${isToday}><td>${item.r}</td><td>${item.t}</td><td>${item.i}</td><td>${item.s}</td><td>${item.m}</td></tr>`;
  });
  document.getElementById('bootstrap-jadwal-body').innerHTML = rows;
})();
</script>

“Copy to Clipboard” Button

Fitur ini sangat membantu user yang ingin membagikan jadwal hari ini ke status media sosial. Hanya dengan satu klik, teks jadwal yang rapi akan tersalin ke clipboard mereka.

<div style="font-family:sans-serif; background:#f9f9f9; padding:20px; border-radius:12px; border:1px solid #ddd; max-width:300px; text-align:center;">
  <p id="copy-text" style="font-size:14px; color:#444;">Jadwal Jakarta: Imsak 04:30 | Maghrib 18:17</p>
  <button id="btn-copy" style="background:#004d40; color:white; border:none; padding:8px 15px; border-radius:6px; cursor:pointer;">Salin Jadwal</button>
  <span id="copy-msg" style="display:block; font-size:11px; color:green; margin-top:5px; opacity:0;">Berhasil disalin!</span>
</div>

<script>
(function() {
  const data = [{t:"19 Feb 2026", i:"04:30", m:"18:17"}]; // Gunakan data harian
  const d = data[0]; 
  const teksJadwal = `Jadwal Imsakiyah DKI Jakarta (${d.t}): Imsak: ${d.i}, Maghrib: ${d.m}`;
  document.getElementById('copy-text').innerText = teksJadwal;

  document.getElementById('btn-copy').onclick = function() {
    navigator.clipboard.writeText(teksJadwal);
    const msg = document.getElementById('copy-msg');
    msg.style.opacity = "1";
    setTimeout(() => msg.style.opacity = "0", 2000);
  };
})();
</script>

Hero Banner Section: Tampilan Header Mewah

Jadikan jadwal Imsakiyah sebagai elemen visual utama di header website kamu. Script ini menggunakan desain lebar penuh (full-width) yang memberikan kesan Quiet Luxury.

<div style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://source.unsplash.com/random/1200x400/?ramadan,mosque'); background-size: cover; color: white; padding: 60px 20px; text-align: center; font-family: sans-serif; border-radius: 15px;">
  <h1 style="margin: 0; font-size: 32px; text-transform: uppercase; letter-spacing: 2px;">Ramadan 1447 H</h1>
  <div style="font-size: 64px; font-weight: 900; margin: 20px 0;" id="hero-maghrib">18:17</div>
  <p style="font-size: 18px; opacity: 0.9;">Waktu Berbuka Puasa Hari Ini di <b>DKI Jakarta</b></p>
  <div style="display: inline-block; background: rgba(255,255,255,0.2); padding: 10px 30px; border-radius: 50px; backdrop-filter: blur(5px);">
    Imsak: <b id="hero-imsak">04:30</b>
  </div>
</div>

<script>
(function() {
  // Database sapaan (Hanya satu entitas sebagai contoh)
  const d = {t:"19 Feb 2026", i:"04:30", m:"18:17"}; 
  document.getElementById('hero-maghrib').innerText = d.m;
  document.getElementById('hero-imsak').innerText = d.i;
})();
</script>

Cara Mengetes Kode HTML Jadwal Imsakiyah Secara Online

Sudah memilih script yang cocok tapi ragu apakah tampilannya pas di websitemu? Tenang, kamu tidak perlu langsung mengedit file tema WordPress atau membuat file .html baru di komputer.

Kamu bisa menggunakan HTML Viewer Online untuk melihat hasil real-time dari 15 script di atas. Salah satu tools yang paling kami rekomendasikan adalah JSONFormatter HTML Viewer.

Langkah-langkahnya sangat simpel:

1. Copy Kode: Pilih salah satu dari 15 script di atas yang paling kamu suka, lalu salin (copy) seluruh kodenya.
2. Buka HTML Viewer: Kunjungi situs https://jsonformatter.org/html-viewer/.
3. Paste & Run: Tempelkan kode yang sudah kamu salin ke dalam kolom sebelah kiri (Input).
4. Lihat Hasil: Secara otomatis (atau klik tombol Run/Preview), hasil tampilan widget jadwal imsakiyah akan muncul di kolom sebelah kanan.

Dengan cara ini, kamu bisa bereksperimen mengubah warna CSS, mengganti ukuran font, atau mencoba fungsionalitas tombol sebelum benar-benar memasangnya secara permanen.

Siapkan Website Ramadanmu “Lebih Baik” Bersama Qwords

Memasang script html jadwal imsakiyah yang ringan dan tanpa API adalah langkah cerdas untuk menjaga performa website tetap optimal. Namun, perlu diingat bahwa di bulan Ramadan, traffic website cenderung melonjak drastis, terutama pada jam-jam kritis menjelang berbuka puasa dan sahur.

Sehebat apa pun skrip statis yang kamu gunakan, semua akan sia-sia jika server hostingmu tidak mampu menangani lonjakan pengunjung secara simultan. Jangan sampai momen berbagi berkah terganggu karena website down atau error 504 saat ribuan orang ingin mengecek jam berbuka.

Untuk itu, pastikan project Ramadanmu kali ini didukung oleh infrastruktur yang High Performance dan Scalable. Layanan WordPress Hosting atau Cloud VPS dari Qwords dirancang khusus untuk menangani traffic tinggi dengan uptime yang bisa diandalkan. Jadi, kamu bisa fokus ibadah dan mengembangkan konten, urusan server biar kami yang jaga.

Investment kecil untuk impact yang gede. Yuk, pindahkan websitemu ke Qwords sekarang agar Ramadan tahun ini terasa “Lebih Baik” bagi kamu dan pengunjung websitemu!