Cara Pasang Jam Melayang di Kiri Atas Blog (Non-AMP Blogger)

Jam melayang di kiri atas blog adalah elemen kecil yang dapat membuat tampilan blog kamu terlihat modern dan dinamis. Selain berfungsi menampilkan waktu secara real-time, jam ini juga menambah kesan profesional pada desain blog. Tutorial ini cocok untuk kamu yang memakai tema Fletro Pro atau Median UI.

Manfaat Menambahkan Jam Digital di Blog

• Menunjukkan waktu secara real-time kepada pengunjung.
• Menambah kesan hidup dan interaktif pada tampilan blog.
• Memberikan nuansa profesional tanpa memperberat loading halaman.
• Dapat dikustomisasi agar menyatu dengan warna tema blog kamu.

Langkah-Langkah Memasang Jam Melayang di Kiri Atas Blog

1. Masuk ke Dashboard Blogger

Buka Blogger.com, pilih blog yang ingin kamu ubah, lalu buka menu Tata Letak (Layout).

2. Tambahkan Gadget HTML/JavaScript

Klik bagian Tambahkan Gadget → pilih HTML/JavaScript. Kamu bisa meletakkannya di bagian mana saja, karena jam ini akan melayang otomatis di posisi kiri atas layar.

3. Tempelkan Kode Jam Melayang Berikut Ini

<!-- Jam Melayang Kiri Atas by BIKARS_creativ -->
<style>
.floating-clock {
  position: fixed;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  z-index: 9999;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .3s ease;
}
.floating-clock:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.floating-clock svg {
  width: 18px;
  height: 18px;
}
@media (max-width:480px){
  .floating-clock {
    font-size: 14px;
    padding: 8px 14px;
    top: 10px;
    left: 10px;
  }
}
</style>

<div class='floating-clock' id='clockBox' title='Jam Digital Real-Time'>
  <svg viewBox='0 0 24 24' fill='currentColor'>
    <path d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8Zm.5-13h-1v6l5.25 3.15.5-.86L12.5 13Z'/>
  </svg>
  <span id='jamSekarang'>00:00:00</span>
</div>

<script>
function tampilJam(){
  const e = document.getElementById("jamSekarang");
  const d = new Date();
  let h = d.getHours().toString().padStart(2,'0');
  let m = d.getMinutes().toString().padStart(2,'0');
  let s = d.getSeconds().toString().padStart(2,'0');
  e.textContent = `${h}:${m}:${s}`;
}
setInterval(tampilJam,1000);
tampilJam();
</script>

4. Simpan dan Lihat Hasilnya

Setelah menempelkan kode di atas, klik Simpan. Lalu buka blog kamu dan perhatikan bagian kiri atas — jam digital melayang akan tampil dengan efek halus dan menampilkan waktu real-time.

Cara Mengubah Tampilan Jam

• Ubah posisi dengan mengganti nilai top dan left.
• Ganti warna latar di bagian background (misalnya jadi hitam atau putih).
• Ubah font dengan mengganti font-family sesuai selera.
• Atur ukuran huruf di font-size agar sesuai tema blog.

Tips Tambahan

• Gunakan warna jam yang selaras dengan tema blog agar tampak elegan.
• Jika ingin jam lebih informatif, tambahkan tanggal otomatis di bawah jam.
• Untuk tema Fletro atau Median UI, gunakan warna gelap atau semi-transparan agar menyatu dengan header.

Kesimpulan

Dengan langkah-langkah di atas, kamu bisa membuat jam digital melayang di kiri atas blog dengan tampilan modern, ringan, dan responsif. Widget ini cocok untuk mempercantik blog tanpa mengganggu kenyamanan pembaca.

Cara Buat Jam dan Kalender Masehi di Atas Blog

Selain jam digital melayang di pojok, kamu juga bisa menambahkan jam dan kalender Masehi di bagian atas blog. Biasanya jam dan kalender ini diletakkan di atas header atau di bawah menu navigasi, sehingga langsung terlihat oleh pengunjung saat membuka halaman.

1. Masuk ke Dashboard Blogger

Buka Blogger.com, lalu pilih blog kamu. Setelah itu masuk ke menu Tata Letak (Layout).

2. Tambahkan Gadget HTML/JavaScript di Bagian Atas

Scroll ke bagian paling atas layout (biasanya bernama Header atau Atas Halaman) lalu klik Tambahkan Gadget → pilih HTML/JavaScript.

3. Tempelkan Kode Jam dan Kalender Berikut Ini

<!-- Jam + Kalender Masehi di Atas Blog (NON-AMP) -->
<style>
#topClockCalendar{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  background:rgba(37,99,235,.95); color:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:15px; padding:6px 18px; gap:12px; display:flex; align-items:center; flex-wrap:wrap;
  border-bottom-left-radius:10px; border-bottom-right-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.15); z-index:9999; backdrop-filter:blur(6px);
}
#topClockCalendar .t { font-variant-numeric: tabular-nums; letter-spacing:.5px; }
@media (max-width:480px){ #topClockCalendar{font-size:13px; padding:6px 12px; gap:8px;} }
</style>

<div id="topClockCalendar" aria-live="polite" role="status">
  🕒 <span class="t" id="tccTime">00:00:00</span>
  📅 <span id="tccDate">Senin, 1 Januari 2025</span>
</div>

<script>
(() => {
  // Atur zona waktu di sini. Jika mau ikut jam perangkat, ganti menjadi: const TZ = null;
  const TZ = 'Asia/Makassar';

  const timeEl = document.getElementById('tccTime');
  const dateEl = document.getElementById('tccDate');
  if(!timeEl || !dateEl) return;

  function tick(){
    const now = new Date();
    const timeFmt = new Intl.DateTimeFormat('id-ID', {
      hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false, timeZone: TZ || undefined
    });
    const dateFmt = new Intl.DateTimeFormat('id-ID', {
      weekday:'long', day:'numeric', month:'long', year:'numeric', timeZone: TZ || undefined
    });
    timeEl.textContent = timeFmt.format(now);
    dateEl.textContent = dateFmt.format(now);
  }
  tick();
  setInterval(tick, 1000);
})();
</script>

4. Simpan dan Cek Hasilnya

Klik Simpan pada gadget HTML, lalu buka blog kamu. Sekarang akan muncul jam dan kalender Masehi yang melayang di bagian atas halaman blog, menampilkan waktu dan tanggal terkini secara otomatis.

Cara Ubah Tampilan Jam dan Kalender

• Ganti warna latar belakang di baris background: rgba(37,99,235,0.95); agar sesuai dengan tema blog (misalnya hitam, putih, atau transparan).
• Ubah posisi dengan mengganti nilai top dan left.
• Jika ingin jam menempel di kiri atas saja, ubah left: 50% dan hapus transform: translateX(-50%).
• Gunakan backdrop-filter: blur(6px); untuk efek kaca transparan seperti tampilan modern.

Tips Agar Lebih Menarik

• Gunakan font Google seperti Poppins, Inter, atau Roboto agar tampil elegan.
• Bisa tambahkan gradasi warna di background agar lebih dinamis.
• Untuk blog islami, bisa menambahkan tanggal Hijriah di samping tanggal Masehi.
• Pastikan tidak terlalu menutupi menu utama blog, atur tinggi header bila perlu.

Kesimpulan

Dengan memasang jam dan kalender Masehi di atas blog, tampilan situs kamu menjadi lebih informatif dan profesional. Widget ini ringan, otomatis mengikuti waktu pengunjung, serta bisa dikustomisasi agar sesuai dengan gaya tema blog kamu.

Selamat mencoba dan semoga bermanfaat!

Cara Pasang Jam dan Kalender Segi Enam Gradasi Biru Merah yang Menghilang Otomatis apabila layar ditekan

Jika kamu ingin menambahkan jam digital dan kalender yang tampil modern serta tidak mengganggu tampilan blog, kamu bisa mencoba versi jam segi enam melayang transparan ini. Widget ini akan muncul di kiri atas halaman dan menghilang otomatis setelah 2 detik. Desainnya transparan dengan gradasi warna biru-merah yang keren dan ringan di semua tema Blogger.

1. Masuk ke Dashboard Blogger

Buka Blogger.com, pilih blog kamu, lalu buka menu Tata Letak (Layout).

2. Tambahkan Gadget HTML/JavaScript

Pada bagian atas tata letak blog, klik Tambahkan Gadget → pilih HTML/JavaScript.

3. Tempelkan Kode Berikut Ini

<!-- ✅ Jam + Kalender Masehi & Hijriah Segi Enam Gradasi | Hilang Saat Tap, Muncul Saat Diam -->
<style>
.hex-clock {
  position: fixed;
  top: 12px;
  left: 12px;
  width: clamp(120px, 25vw, 180px);
  aspect-ratio: 1.1547;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  text-align: center;
  border-radius: 10px;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(8px, 2vw, 18px);
  z-index: 9999;
  line-height: 1.3;
  border: 1px solid rgba(255,255,255,0.2);
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

/* Gradasi warna teks */
.gradient-text {
  background: linear-gradient(135deg, #2563eb, #ff3b3b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* Ukuran teks */
.hex-clock .time {
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 700;
  letter-spacing: 1px;
}
.hex-clock .masehi {
  font-size: clamp(10px, 2vw, 13px);
  font-weight: 500;
  margin-top: 3px;
  opacity: 0.9;
}
.hex-clock .hijri {
  font-size: clamp(9px, 1.8vw, 12px);
  margin-top: 2px;
  opacity: 0.85;
}

/* Responsif kecil */
@media (max-width: 380px) {
  .hex-clock { top: 8px; left: 8px; padding: 8px; }
  .hex-clock .time { font-size: 15px; }
  .hex-clock .masehi, .hex-clock .hijri {
    font-size: 10px;
    line-height: 1.2;
  }
}
</style>

<div class="hex-clock" id="hexClockBox" aria-live="polite" role="status">
  <div class="time gradient-text" id="jamDigital">00:00:00</div>
  <div class="masehi gradient-text" id="kalenderMasehi">Senin, 1 Januari 2025</div>
  <div class="hijri gradient-text" id="kalenderHijriah">1 Muharram 1447 H</div>
</div>

<script>
(() => {
  const TZ = 'Asia/Jakarta';
  const elBox = document.getElementById('hexClockBox');
  const elJam = document.getElementById('jamDigital');
  const elMasehi = document.getElementById('kalenderMasehi');
  const elHijri = document.getElementById('kalenderHijriah');

  const hariID = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
  const bulanID = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];

  const fmtTime = new Intl.DateTimeFormat('id-ID', {
    hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false,
    timeZone: TZ || undefined
  });
  const fmtHijri = new Intl.DateTimeFormat('en-TN-u-ca-islamic', {
    day:'numeric', month:'long', year:'numeric', timeZone: TZ || undefined
  });

  function formatMasehi(d){
    const n = TZ ? new Date(d.toLocaleString('en-US',{timeZone:TZ})) : d;
    return `${hariID[n.getDay()]}, ${n.getDate()} ${bulanID[n.getMonth()]} ${n.getFullYear()}`;
  }

  function tick(){
    const now = new Date();
    elJam.textContent = fmtTime.format(now);
    elMasehi.textContent = formatMasehi(now);
    elHijri.textContent = fmtHijri.format(now).replace(/\s?A?H$/i,' H');
  }

  tick();
  setInterval(tick, 1000);

  // ✋ Hilang ketika layar ditekan, muncul kembali saat tidak disentuh
  let hideTimeout;
  function hideClock() {
    elBox.style.opacity = 0;
    clearTimeout(hideTimeout);
    hideTimeout = setTimeout(() => { elBox.style.opacity = 1; }, 3000);
  }

  ['mousedown','touchstart'].forEach(evt => {
    document.addEventListener(evt, hideClock);
  });
})();
</script>

4. Simpan dan Cek Hasilnya

Setelah menempelkan kode di atas, klik Simpan dan lihat blog kamu. Widget jam segi enam transparan akan muncul di kiri atas lalu menghilang otomatis setelah 2 detik.

Fitur Widget Ini

• 🎨 Teks gradasi biru–merah elegan.
• 🌫️ Latar transparan blur menyatu dengan tema blog.
• 📱 Responsif penuh di semua ukuran layar.
• 🕒 Jam, Kalender Masehi & Hijriah tampil real-time.
• 💨 Efek auto-hide: hilang otomatis setelah 2 detik tampil.

Kesimpulan

Dengan widget ini, kamu bisa menambahkan jam digital dan dua kalender yang tampil elegan namun tidak mengganggu pengunjung. Efek menghilang otomatis membuatnya tetap profesional dan ringan. Cocok untuk semua tema modern seperti Fletro, Median UI, dan Igniplex.

Selamat mencoba dan semoga blog kamu makin keren!