Kode Javascript/HTML Jam digital untuk Blogger
Cara mentautkan ada di bagian bawah script < Gulir ke Bawah >
<style>
/* Import font 'VT323' atau 'DSEG7 Classic' jika ingin lebih segmented, atau 'Digital-7' */
/* Untuk contoh ini, saya akan menggunakan 'Digital-7' karena sudah diimpor sebelumnya */
@font-face {
font-family: 'Digital-7';
src: url('https://fonts.cdnfonts.com/s/29424/digital-7.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0; /* Latar belakang halaman yang terang */
}
.radio-clock-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px; /* Mengurangi padding */
background-color: #2c2c2c; /* Warna dasar radio yang gelap */
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5); /* Efek bayangan dan inset disesuaikan */
border: 3px solid #1a1a1a; /* Border tebal untuk bingkai radio */
position: relative;
width: 90%; /* Mengisi sebagian besar lebar widget */
max-width: 280px; /* Batasan lebar maksimum yang lebih kecil untuk widget */
margin: 10px auto; /* Penempatan tengah */
}
/* Layar jam */
.radio-display {
display: flex;
align-items: center;
justify-content: center;
background-color: #1a1a1a; /* Latar belakang layar gelap */
border-radius: 8px;
padding: 10px 15px; /* Mengurangi padding */
margin-bottom: 15px; /* Mengurangi margin bawah */
border: 2px solid #0a0a0a;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); /* Efek kaca cekung disesuaikan */
}
.radio-digit, .radio-separator {
font-family: 'Digital-7', monospace; /* Font digital */
font-size: 3.2em; /* Ukuran digit lebih kecil */
color: #00ff00; /* Warna hijau neon khas radio lama */
text-shadow: 0 0 6px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.5); /* Efek cahaya neon disesuaikan */
margin: 0 3px; /* Mengurangi margin */
position: relative;
overflow: hidden;
height: 1.2em; /* Tinggi tetap untuk mencegah CLS */
display: flex;
align-items: center;
justify-content: center;
}
.radio-separator {
color: #ffcc00; /* Warna kuning untuk pemisah */
text-shadow: 0 0 5px rgba(255, 204, 0, 0.7); /* Efek cahaya kuning disesuaikan */
animation: radio-blink 1s infinite step-end; /* Animasi berkedip */
}
@keyframes radio-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Animasi untuk perubahan digit */
.radio-digit.animate-change span {
animation: digit-slide-in 0.3s forwards ease-out;
}
@keyframes digit-slide-in {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Detail tombol radio atau indikator */
.radio-controls {
display: flex;
gap: 10px; /* Mengurangi jarak antar tombol */
margin-top: 8px; /* Mengurangi margin atas */
}
.radio-button {
width: 25px; /* Ukuran tombol lebih kecil */
height: 25px; /* Ukuran tombol lebih kecil */
background-color: #4a4a4a;
border-radius: 50%;
border: 2px solid #1a1a1a;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.3); /* Bayangan disesuaikan */
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.radio-button:hover {
background-color: #5a5a5a;
box-shadow: inset 0 0.5px 2px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.radio-button:active {
transform: translateY(1px);
box-shadow: inset 0 0.5px 1px rgba(0, 0, 0, 0.8);
}
/* Responsif */
@media (max-width: 768px) {
.radio-clock-container {
padding: 12px;
max-width: 260px; /* Batasan lebar yang lebih ketat */
}
.radio-display {
padding: 8px 12px;
}
.radio-digit, .radio-separator {
font-size: 2.8em;
margin: 0 2px;
}
.radio-button {
width: 22px;
height: 22px;
}
}
@media (max-width: 480px) {
.radio-clock-container {
padding: 10px;
border-radius: 10px;
max-width: 240px; /* Batasan lebar yang lebih ketat lagi */
}
.radio-display {
padding: 6px 8px;
margin-bottom: 10px;
}
.radio-digit, .radio-separator {
font-size: 2em;
margin: 0 1px;
}
.radio-controls {
gap: 8px;
}
.radio-button {
width: 18px;
height: 18px;
}
}
</style>
<div class="radio-clock-container">
<div class="radio-display" id="radioClock">
<!-- Digit akan dimasukkan oleh JavaScript -->
</div>
<div class="radio-controls">
<div class="radio-button"></div>
<div class="radio-button"></div>
<div class="radio-button"></div>
</div>
</div>
<script>
function updateClock() {
const now = new Date(); // Objek Date akan secara otomatis menggunakan zona waktu lokal pengguna
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const radioClockElement = document.getElementById('radioClock');
let newTimeString = '';
const currentTimeString = `${hours}:${minutes}:${seconds}`;
const prevTimeString = radioClockElement.textContent || '00:00:00'; // Ambil teks saat ini atau default
// Perbarui setiap digit dengan animasi jika ada perubahan
for (let i = 0; i < currentTimeString.length; i++) {
const newChar = currentTimeString[i];
const prevChar = prevTimeString[i];
if (newChar === ':') {
newTimeString += `<span class="radio-separator">:</span>`;
} else {
// Hanya tambahkan kelas animasi jika digit berubah
if (newChar !== prevChar) {
newTimeString += `<span class="radio-digit animate-change">${newChar}</span>`;
} else {
newTimeString += `<span class="radio-digit">${newChar}</span>`;
}
}
}
radioClockElement.innerHTML = newTimeString;
// Hapus kelas animate-change setelah animasi selesai (untuk memungkinkan animasi berulang)
// Ini harus dilakukan setelah sedikit penundaan agar animasi memiliki waktu untuk diputar
setTimeout(() => {
const animatedDigits = radioClockElement.querySelectorAll('.animate-change');
animatedDigits.forEach(digit => {
digit.classList.remove('animate-change');
});
}, 300); // Sesuai dengan durasi animasi digit-slide-in (0.3s)
}
// Perbarui jam setiap detik
setInterval(updateClock, 1000);
// Panggil pertama kali saat halaman dimuat
updateClock();
</script>
Cara Memasang di Blogger:
1. Login ke Dashboard Blogger Anda.
2. Pilih Tata Letak (Layout) dari menu samping kiri.
3. Cari area di mana Anda ingin menempatkan jam (misalnya, di sidebar, di bawah header, atau di footer).
4. Klik Tambahkan Widget (Add a Widget).
5. Dalam daftar gadget yang muncul, pilih HTML/JavaScript.
6. Pada kolom Konten (Content), salin seluruh kode di atas (mulai dari <style> hingga </script>) dan tempelkan di sana.
7. Klik tombol Simpan (Save).
8. Jangan lupa untuk Simpan Susunan (Save Arrangement) di halaman Tata Letak setelah menambahkan gadget.
Jam digital Anda sekarang akan memiliki tampilan bergaya radio retro yang unik dan akan menampilkan waktu lokal bagi setiap pengunjung blog Anda!
0 Komentar