How To Add Age Calculator In Blogger Blog (With Source Code)

Add Age Calculator In Blog (With Source Code)

• 1.) Go to www.blogger.com.

• 2.) Login using your Gmail Account.

• 3.) After login, the Blogger Dashboard will open

• 4.) Click and Select The Blog where you want to add the code

• 5.) From the left menu, click on Layout and go to layout 

• 6.) Click +Add a Gadget where you want to show the widget (Sidebar / Footer / Header)

• 7.) From the gadget list, click HTML/JavaScript

Enter a Title (optional)

Copy the HTML/JavaScript code provided below and paste it into the Content Box.

• 8.) Click Save.

• 9.) Click Save Arrangement.

• 10.)  Click View Blog and Check Your Blog.

• 11.) Your HTML / JavaScript widget is Now Live.

Age Calculator HTML Javascript Code:

<!-- Age Calculator for Blogger -->

<div id="ageCalcBox">

  <h2>Age Calculator</h2>

  <label>Date of Birth</label>

  <input type="date" id="dob" />

  <label>Calculate Age At Date</label>

  <input type="date" id="calcDate" />

  <button onclick="calcAge()">Calculate Age</button>

  <div id="ageResult"></div>

</div>

<style>

#ageCalcBox{

  max-width:420px;

  margin:30px auto;

  padding:25px;

  background:#ffffff;

  border-radius:16px;

  box-shadow:0 8px 25px rgba(0,0,0,.15);

  font-family:Arial, sans-serif;

  box-sizing:border-box;

}

#ageCalcBox h2{

  text-align:center;

  color:#009688;

  margin-bottom:20px;

}

#ageCalcBox label{

  display:block;

  margin:12px 0 6px;

  font-size:15px;

  color:#555;

}

#ageCalcBox input{

  width:100%;

  padding:10px;

  border-radius:8px;

  border:1px solid #ccc;

  font-size:15px;

  box-sizing:border-box;

}

#ageCalcBox button{

  width:100%;

  margin-top:18px;

  padding:12px;

  border:none;

  border-radius:10px;

  background:#ff6b00;

  color:#fff;

  font-size:16px;

  cursor:pointer;

}

#ageResult{

  margin-top:20px;

  text-align:center;

  font-size:16px;

  color:#333;

}

/* Mobile Fix */

@media(max-width:480px){

  #ageCalcBox{

    margin:15px;

    padding:20px;

  }

}

</style>

<script>

(function(){

  var today = new Date().toISOString().split('T')[0];

  document.getElementById("calcDate").value = today;

})();

function calcAge(){

  var dob = new Date(document.getElementById("dob").value);

  var calcDate = new Date(document.getElementById("calcDate").value);

  if(!dob.getTime() || !calcDate.getTime()){

    document.getElementById("ageResult").innerHTML = "⚠ Please select valid dates";

    return;

  }

  if(calcDate < dob){

    document.getElementById("ageResult").innerHTML = "❌ Calculation date cannot be before birth date";

    return;

  }

  var y = calcDate.getFullYear() - dob.getFullYear();

  var m = calcDate.getMonth() - dob.getMonth();

  var d = calcDate.getDate() - dob.getDate();

  if(d < 0){

    m--;

    d += new Date(calcDate.getFullYear(), calcDate.getMonth(), 0).getDate();

  }

  if(m < 0){

    y--;

    m += 12;

  }

  document.getElementById("ageResult").innerHTML =

    "🎂 Age is <b>" + y + "</b> years <b>" + m + "</b> months <b>" + d + "</b> days";

}

</script>