Cara Membuat Halaman Hitung Umur Online di Blogger (Script HTML5 Responsif)

Menambahkan fitur interaktif pada blog adalah salah satu strategi terbaik untuk meningkatkan user engagement dan memperlama durasi kunjungan pembaca. Salah satu tools sederhana namun sangat berguna yang banyak dicari orang adalah Kalkulator Umur.

Seringkali kita bingung ketika harus menghitung usia seseorang secara detail, tidak hanya tahun, tetapi hingga ke bulan dan hari. Melalui tutorial ini, Anda akan mendapatkan script Hitung Umur Online siap pakai yang didesain dengan tampilan UI/UX modern, responsif, dan ringan.

Fitur Script Kalkulator Umur Ini

Sebelum masuk ke tahap pemasangan, berikut adalah keunggulan dari script yang akan kita gunakan. Script ini dibangun menggunakan HTML, CSS, dan Vanilla JavaScript tanpa dependensi eksternal (jQuery), sehingga sangat cepat saat dimuat.

Anda dapat melihat bagaimana script ini bekerja secara langsung melalui tombol demo di bawah ini:

Cara Memasang Script di Blogger

Proses pemasangan sangat mudah. Anda tidak perlu mengedit template inti blog, cukup buat Halaman (Page) baru. Ikuti langkah-langkah berikut dengan teliti:

Source Code Hitung Umur

Silakan salin kode berikut ini sepenuhnya:

<div id="age-calc-app">
  
  <style>
    /* Scoped Styles */
    #age-calc-app {
      font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.15);
      border: 1px solid #e1e8f0;
      color: #334155;
      overflow: hidden;
      position: relative;
    }

    #age-calc-app * { box-sizing: border-box; }

    /* Header */
    .ac-header {
      background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
      padding: 25px; text-align: center; color: white;
    }
    .ac-header h2 { margin: 0; font-size: 22px; font-weight: 700; }
    .ac-header p { margin: 5px 0 0; font-size: 13px; opacity: 0.9; }

    /* Content */
    .ac-content { padding: 25px; }
    
    .ac-form-group { margin-bottom: 20px; }
    .ac-label { font-size: 13px; font-weight: 600; color: #64748b; margin-bottom: 8px; display: block; }
    
    .ac-input {
      width: 100%; padding: 12px 15px; border: 2px solid #e2e8f0; border-radius: 10px;
      font-size: 16px; background: #f8fafc; color: #334155; transition: all 0.3s;
      font-family: inherit;
    }
    .ac-input:focus { outline: none; border-color: #3b82f6; background: #fff; }

    .ac-btn {
      width: 100%; padding: 14px; border: none; border-radius: 10px;
      background: #3b82f6; color: white; font-weight: 700; font-size: 15px;
      cursor: pointer; transition: transform 0.2s, background 0.2s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .ac-btn:hover { background: #2563eb; transform: translateY(-2px); }

    /* Result Section */
    #acResult { display: none; margin-top: 25px; animation: fadeIn 0.5s ease; }

    /* Age Cards Grid */
    .ac-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px;
    }

    .ac-card {
      background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
      padding: 15px 10px; text-align: center;
    }
    .ac-val { font-size: 24px; font-weight: 800; color: #1e40af; line-height: 1; margin-bottom: 5px; }
    .ac-unit { font-size: 11px; color: #64748b; text-transform: uppercase; font-weight: 600; }

    /* Extra Info */
    .ac-extra {
      background: #f8fafc; border-radius: 12px; padding: 15px;
      border: 1px solid #e2e8f0; font-size: 13px; color: #475569;
    }
    .ac-row {
      display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #e2e8f0;
    }
    .ac-row:last-child { border-bottom: none; }
    .ac-row span:last-child { font-weight: 600; color: #334155; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  </style>

  <div class="ac-header">
    <h2>Hitung Umur Online</h2>
    <p>Kalkulator Usia Presisi & Detail</p>
  </div>

  <div class="ac-content">
    <div class="ac-form-group">
      <label class="ac-label">Masukkan Tanggal Lahir</label>
      <input type="date" id="dobInput" class="ac-input">
    </div>

    <button class="ac-btn" onclick="calculateAge()">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
      Hitung Sekarang
    </button>

    <div id="acResult">
      <div class="ac-grid">
        <div class="ac-card">
          <div id="resYears" class="ac-val">0</div>
          <div class="ac-unit">Tahun</div>
        </div>
        <div class="ac-card">
          <div id="resMonths" class="ac-val">0</div>
          <div class="ac-unit">Bulan</div>
        </div>
        <div class="ac-card">
          <div id="resDays" class="ac-val">0</div>
          <div class="ac-unit">Hari</div>
        </div>
      </div>

      <div class="ac-extra">
        <div class="ac-row">
          <span>Hari Lahir:</span>
          <span id="resDayName">-</span>
        </div>
        <div class="ac-row">
          <span>Ulang Tahun Berikutnya:</span>
          <span id="resNextBday" style="color:#d946ef;">-</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function calculateAge() {
      const input = document.getElementById('dobInput').value;
      const resultArea = document.getElementById('acResult');
      
      if (!input) {
        alert("Silakan pilih tanggal lahir terlebih dahulu!");
        return;
      }

      const dob = new Date(input);
      const today = new Date();

      // Validasi Tanggal Masa Depan
      if (dob > today) {
        alert("Tanggal lahir tidak boleh lebih dari hari ini!");
        return;
      }

      // 1. Hitung Selisih Dasar
      let years = today.getFullYear() - dob.getFullYear();
      let months = today.getMonth() - dob.getMonth();
      let days = today.getDate() - dob.getDate();

      // 2. Koreksi Bulan dan Hari
      if (days < 0) {
        months--;
        // Ambil jumlah hari di bulan sebelumnya
        const lastMonthDate = new Date(today.getFullYear(), today.getMonth(), 0);
        days += lastMonthDate.getDate();
      }

      if (months < 0) {
        years--;
        months += 12;
      }

      // 3. Update Grid UI
      animateValue("resYears", years);
      animateValue("resMonths", months);
      animateValue("resDays", days);

      // 4. Hitung Hari Kelahiran (Senin, Selasa, dll)
      const dayNames = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
      document.getElementById('resDayName').textContent = dayNames[dob.getDay()];

      // 5. Hitung Countdown Ulang Tahun Berikutnya
      const nextBday = new Date(today.getFullYear(), dob.getMonth(), dob.getDate());
      if (today > nextBday) {
        nextBday.setFullYear(today.getFullYear() + 1);
      }
      
      const oneDay = 1000 * 60 * 60 * 24;
      const daysLeft = Math.ceil((nextBday.getTime() - today.getTime()) / oneDay);
      
      let nextMsg = "";
      if (daysLeft === 365 || daysLeft === 0) {
         nextMsg = "🎉 HARI INI ULANG TAHUN! 🎂";
      } else {
         nextMsg = daysLeft + " Hari Lagi";
      }
      document.getElementById('resNextBday').textContent = nextMsg;

      // Show Result
      resultArea.style.display = 'block';
    }

    // Fungsi Animasi Angka
    function animateValue(id, end) {
      const obj = document.getElementById(id);
      let start = 0;
      if (end === 0) {
          obj.textContent = 0;
          return;
      }
      let duration = 1000;
      let range = end - start;
      let current = start;
      let increment = end > start ? 1 : -1;
      let stepTime = Math.abs(Math.floor(duration / range));
      
      // Jika angka terlalu besar, percepat animasi
      if(stepTime < 10) stepTime = 10; 
      
      let timer = setInterval(function() {
        current += increment;
        obj.textContent = current;
        if (current == end) {
          clearInterval(timer);
        }
      }, stepTime);
      
      // Fallback update langsung jika step terlalu cepat
      obj.textContent = end; 
    }
  </script>
</div>

Tips Kustomisasi Tampilan

Kode di atas sudah diatur agar tampilannya rapi (scoped style) dan tidak merusak tampilan template blog Anda yang lain. Namun, jika Anda ingin mengubah warnanya agar sesuai dengan brand blog Anda, perhatikan bagian CSS:

Kini Anda memiliki halaman tools yang bermanfaat bagi pengunjung. Jangan lupa untuk membagikan halaman ini di media sosial agar trafik blog Anda semakin meningkat.