Kumpulan Kode Jam Digital Gratis untuk Blog — Tampilkan Waktu & Tanggal Indonesia
Tiga pilihan tampilan jam digital lengkap dengan tanggal yang bisa langsung dipasang di blog
Kumpulan Kode Jam Digital Gratis untuk Blog — Tampilkan Waktu Langsung & Tanggal Indonesia
Ingin menampilkan jam yang berjalan secara langsung beserta tanggal lengkap dalam format Bahasa Indonesia di blog atau situs web Anda? Kini Anda tidak perlu repot mencari ke mana-mana. Di ABM SECLAB, kami telah menyiapkan tiga pilihan kode jam digital yang siap pakai, tampilannya menarik, ringan dimuat, dan kompatibel dengan hampir semua platform blog termasuk Blogger, WordPress, dan lainnya.
Semua kode di bawah ini bisa Anda salin langsung dan tempelkan ke dalam elemen HTML/JavaScript atau di dalam isi artikel. Tidak perlu pengaturan rumit, tidak perlu mengubah kode apa pun — cukup salin, tempel, dan jam akan langsung berjalan menampilkan waktu yang sesuai dengan zona waktu pengunjung.
⚠️ PERINGATAN & PETUNJUK PENGGUNAAN:
— Pastikan menyalin kode secara utuh dari awal <!-- atau <style> hingga akhir </script> agar jam berfungsi sempurna.
— Kode ini bekerja otomatis mengambil waktu dari perangkat pengunjung, sehingga tidak perlu pengaturan zona waktu tambahan.
— Dapat ditempelkan di Widget HTML, di dalam artikel, atau di bagian mana pun yang mendukung kode JavaScript.
— Tampilan dapat berubah sedikit tergantung tema blog yang Anda gunakan.
Kode Jam Digital — Versi 1: Sederhana & Ringan
Berikut adalah kode jam yang bisa Anda pasang di weblog Anda. Tampilan sederhana dengan nuansa gelap dan tulisan hijau menyala, sangat ringan dan cepat dimuat:
Salin semua kode di bawah ini lalu tempelkan di Widget HTML/JavaScript atau langsung di dalam artikel:
<style>
.jam-container {
text-align: center;
font-family: 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #00ff88;
padding: 25px;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
max-width: 400px;
margin: 20px auto;
border: 2px solid #00ff88;
}
.jam-waktu {
font-size: 48px;
font-weight: bold;
letter-spacing: 3px;
text-shadow: 0 0 10px #00ff88;
}
.jam-tanggal {
font-size: 16px;
margin-top: 10px;
color: #e0e0e0;
letter-spacing: 1px;
}
.jam-label {
font-size: 12px;
color: #888;
margin-top: 5px;
}
</style>
<div class="jam-container">
<div class="jam-label">ABM SECLAB - LIVE CLOCK</div>
<div id="jam" class="jam-waktu">00:00:00</div>
<div id="tanggal" class="jam-tanggal">Senin, 1 Januari 2026</div>
</div>
<script>
function updateJam() {
const now = new Date();
// Format Jam
let jam = String(now.getHours()).padStart(2, '0');
let menit = String(now.getMinutes()).padStart(2, '0');
let detik = String(now.getSeconds()).padStart(2, '0');
// Format Tanggal Indonesia
const hari = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
const bulan = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
let namaHari = hari[now.getDay()];
let tgl = now.getDate();
let namaBulan = bulan[now.getMonth()];
let tahun = now.getFullYear();
document.getElementById('jam').innerHTML = jam + ':' + menit + ':' + detik;
document.getElementById('tanggal').innerHTML = namaHari + ', ' + tgl + ' ' + namaBulan + ' ' + tahun;
}
updateJam();
setInterval(updateJam, 1000);
</script>
Kode Jam Digital — Versi 2: Modern & Kaca
Versi kedua tampil lebih modern dengan efek kaca tembus pandang dan lingkaran indikator detik yang berputar. Sangat cocok untuk blog dengan tampilan kontemporer:
<div class="abm-clock-card">
<div class="abm-glass-wrapper">
<svg class="abm-ring-svg" viewBox="0 0 100 100">
<circle class="abm-ring-bg" cx="50" cy="50" r="40"></circle>
<circle id="abmRingProgress" class="abm-ring-progress" cx="50" cy="50" r="40"></circle>
</svg>
<div class="abm-clock-content">
<div class="abm-badge"><span class="abm-live-dot"></span> ABM SECLAB • LIVE TIME</div>
<div class="abm-time-display"><span id="abmHours">00</span><span class="abm-colon">:</span><span id="abmMinutes">00</span> <span id="abmSeconds" class="abm-sec">00</span></div>
<div id="abmDate" class="abm-date-display">Senin, 1 Januari 2026</div>
</div>
</div>
</div>
<style>
.abm-clock-card { display: flex; justify-content: center; align-items: center; padding: 20px; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }
.abm-glass-wrapper { position: relative; width: 290px; padding: 35px 20px; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(0, 255, 136, 0.25); box-shadow: 0 15px 35px rgba(0,0,0,0.6); text-align: center; }
.abm-ring-svg { position: absolute; top: 50%; left: 50%; width: 250px; height: 250px; transform: translate(-50%, -50%) rotate(-90deg); }
.abm-ring-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 2.5; }
.abm-ring-progress { fill: none; stroke: #00ff88; stroke-width: 2.5; stroke-dasharray: 251.327; stroke-dashoffset: 251.327; stroke-linecap: round; transition: stroke-dashoffset 0.3s ease; }
.abm-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #00ff88; background: rgba(0,255,136,0.08); padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(0,255,136,0.2); }
.abm-live-dot { width: 5px; height: 5px; background: #00ff88; border-radius: 50%; animation: abmPulse 1.5s infinite; }
.abm-time-display { margin-top: 14px; font-size: 38px; font-weight: 800; color: #fff; letter-spacing: 1px; }
.abm-colon { color: #00ff88; animation: abmBlink 1s infinite; margin: 0 2px; }
.abm-sec { font-size: 18px; color: #00ff88; margin-left: 5px; }
.abm-date-display { margin-top: 10px; font-size: 12px; color: #94a3b8; }
@keyframes abmPulse { 0% {opacity:1;} 50% {opacity:0.3;} 100% {opacity:1;} }
@keyframes abmBlink { 0%,100% {opacity:1;} 50% {opacity:0.2;} }
</style>
<script>
function updateClockABM(){
const now=new Date();
const h=String(now.getHours()).padStart(2,'0');
const m=String(now.getMinutes()).padStart(2,'0');
const s=String(now.getSeconds()).padStart(2,'0');
const hari=['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
const bulan=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
document.getElementById('abmHours').textContent=h;
document.getElementById('abmMinutes').textContent=m;
document.getElementById('abmSeconds').textContent=s;
document.getElementById('abmDate').textContent=hari[now.getDay()]+', '+now.getDate()+' '+bulan[now.getMonth()]+' '+now.getFullYear();
const ring=document.getElementById('abmRingProgress');
if(ring) ring.style.strokeDashoffset=251.327-(now.getSeconds()/60)*251.327;
}
updateClockABM(); setInterval(updateClockABM,1000);
</script>
Kode Jam Digital — Versi 3: Sudut & Garis Progres
Versi ketiga tampil dengan nuansa teknologi lengkap dengan garis progres detik di bagian bawah. Memberikan kesan tegas dan berkarakter:
<div class="abm-clock-card">
<div class="abm-outer-frame">
<div class="abm-corner tl"></div>
<div class="abm-corner tr"></div>
<div class="abm-corner bl"></div>
<div class="abm-corner br"></div>
<div class="abm-clock-inner">
<div class="abm-label">SYSTEM TIME</div>
<div class="abm-time-wrap"><span class="abm-digit" id="abmHours">00</span><span class="abm-sep">:</span><span class="abm-digit" id="abmMinutes">00</span><span class="abm-sec-wrap"><span id="abmSeconds">00</span></span></div>
<div class="abm-date-wrap" id="abmDate">Senin, 01 Januari 2026</div>
<div class="abm-progress-bar"><div class="abm-progress-fill" id="abmProgress"></div></div>
</div>
</div>
</div>
<style>
.abm-clock-card { display:flex; justify-content:center; align-items:center; padding:20px; font-family:'Courier New',monospace; }
.abm-outer-frame { position:relative; background:#050718; border-image:linear-gradient(135deg,#00d4ff,#9933ff,#00d4ff)1; border:1px solid transparent; padding:28px 32px; }
.abm-corner { position:absolute; width:16px; height:16px; border-color:#00d4ff; border-style:solid; pointer-events:none; }
.abm-corner.tl { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.abm-corner.tr { top:-1px; right:-1px; border-width:2px 2px 0 0; }
.abm-corner.bl { bottom:-1px; left:-1px; border-width:0 0 2px 2px; }
.abm-corner.br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.abm-clock-inner { text-align:center; color:#fff; }
.abm-label { font-size:11px; letter-spacing:3px; color:#9933ff; margin-bottom:10px; }
.abm-time-wrap { font-size:46px; font-weight:bold; color:#00d4ff; text-shadow:0 0 8px #00d4ff; }
.abm-sep { animation:blinkSep 1s infinite; margin:0 4px; }
.abm-sec-wrap { font-size:20px; color:#9933ff; margin-left:6px; }
.abm-date-wrap { margin-top:8px; font-size:13px; color:#aab; }
.abm-progress-bar { height:3px; background:rgba(255,255,255,0.08); margin-top:14px; border-radius:3px; overflow:hidden; }
.abm-progress-fill { height:100%; width:0%; background:linear-gradient(90deg,#00d4ff,#9933ff); box-shadow:0 0 8px #00d4ff; transition:width 1s linear; }
@keyframes blinkSep { 0%,100%{opacity:1} 50%{opacity:0.2} }
</style>
<script>
function updateClockABM(){
const now=new Date();
const h=String(now.getHours()).padStart(2,'0');
const m=String(now.getMinutes()).padStart(2,'0');
const s=String(now.getSeconds()).padStart(2,'0');
const hari=['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
const bulan=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
document.getElementById('abmHours').textContent=h;
document.getElementById('abmMinutes').textContent=m;
document.getElementById('abmSeconds').textContent=s;
document.getElementById('abmDate').textContent=hari[now.getDay()]+', '+now.getDate()+' '+bulan[now.getMonth()]+' '+now.getFullYear();
document.getElementById('abmProgress').style.width=(now.getSeconds()/60*100)+'%';
}
updateClockABM(); setInterval(updateClockABM,1000);
</script>
Cara Memasangnya Sangat Mudah
- Pilih salah satu versi jam yang paling Anda sukai.
- Blok dan salin seluruh kode yang ada di dalam kotak, mulai dari kode pembuka hingga penutup </script>.
- Buka halaman tata letak atau penulisan artikel di blog Anda.
- Pilih mode penulisan HTML, lalu tempelkan kode tersebut di tempat yang Anda inginkan.
- Simpan dan lihat hasilnya — jam akan langsung berjalan menampilkan waktu saat ini lengkap dengan tanggalnya!
Sekarang pengunjung blog Anda bisa melihat jam yang berjalan secara langsung tanpa harus meninggalkan halaman. Ketiga versi di atas mengambil waktu dari perangkat pengunjung, sehingga tampilan jam akan selalu sesuai dengan waktu di tempat mereka berada. Semoga bermanfaat!
Sumber & Penulisan: abmgarage.com — Kode jam digital gratis disusun oleh ABM SECLAB
Catatan: Kode ini bebas digunakan untuk keperluan blog dan situs web pribadi. Tidak diperbolehkan untuk dijual kembali atau dimodifikasi untuk tujuan komersial tanpa izin tertulis.