Create Age Calculator Tool Website Online On Blogger Step By Step Complete Guide


How to Create Free Age Calculator tool in Blogger and make a static income online? Where from you can download age calculator script for Blogger? You may also know these kind of websites as Online Age Calculator, DOB Calculator, Birthday Calculation, or maybe you search as Google Age Calculator, Find my Age Calculator Online By Date Of Birth, Age by DOB, Or how to calculator my age? On this kind of static website needed just a Javascript, besides you don’t need to add any content again and again, just make it by using some Java Script codes, CSS files and HTML Code and do one time SEO and all done.


Welcome to our Blogging and wordpress section. So in this article today you are going to learn how you can Create Age Calculator Tool in Blogger? So we will know all these things step by step in this article. So stay in this article and know more the complete details.



Nowadays Blogging is now another level. So in this blogging sector there are different sections too. So this is one of Web Tools. So many Blooger like you have wish to easily create Age Calculator Tool Online on Blogger or Blogspot Platform.

First, Let me tell you clearly that the Age Calculator Online tool has a different trend. So in this way all people want to have their own age calculator tool. So, in this post, I have explained in detail how you can easily create an age calculator tool in Blogger using simple script code, CSS files and HTML codes.



In the above image, when you visit the Age Calculator Tool website you will see this screen. You just have to put your name and click on enter your date of birth (DOB) or choose from the calendar and click in calculate. There is also a button to reset the fields.

Related:  The Ultimate SEO Checklist For New Website, Get Traffic, Rank FAST

Age Calculator Tool Blogger Live Preview

By clicking on the following preview button you can see the live preview of the age calculator online tool . Click here for a LIVE PREVIEW

Create Age Calculator Tool in Blogger Step By Step Complete

So friends, not wasting your precious time, I have told you some quick steps by which you can easily make this age calculator tool free in the Blogger. By the way, you can find many websites related to this Age calculator online tool on the internet.

And most designs vary. So in this way the tool that I have provided to you below is completely unique. We have provided HTML, CSS and Java Script code to build this tool below. And you have to follow simply all the few steps.


STEP 1: Download & Install Blank Template

The most important thing is to download the Blank Blogger Template. Click on the Download button below. And open the file copy the code and paste into the theme “HTML section” and save the theme. Download The Templete

Related:  How To Add Apple Touch Icon For Blogger Website?

Now you have a fully blank template installed and you will see a white screen when you visit your blog.

STEP 2: Install Java Script Code

Now You need to insall a JavaScript Code which has given in the box below. You have to copy the full code. Now go to Blogger Dashboard> Layout> Add a Gadget> HTML / JavaScript. Now Paste that given Javascript code and save it.

<script> let display = document.getElementById("display"); let input = document.getElementsByTagName("input"); let button = document.getElementsByTagName("button"); let time = document.getElementById("time"); let disBlock = document.getElementById("disBlock"); let disBD = document.getElementById("disBD"); let creditBlock = document.getElementById("postCredit"); let credit = document.getElementById("credit"); let about = document.getElementById("about"); = "none"; = "none"; let dob = new Date(), today = new Date(), calTime; function samay() { let d = new Date(); time.innerHTML = d.getHours() + " Hours, " + d.getMinutes() + " Minutes, " + d.getSeconds() + " Seconds Old"; } function calculate() { = "block"; = "block"; credit.innerHTML = "Thank You For Visiting our Tool<br>Edited By Moviespie.Com"; let x = input[1].value.split("-"); dob.setDate(x[2]); dob.setMonth(x[1] - 1); dob.setFullYear(x[0]); let year, month, day, HBD; day = (function() { if(today.getDate() > dob.getDate()) { return today.getDate() - dob.getDate() - 1; } else if(today.getDate() == dob.getDate()) { return today.getDate() - dob.getDate(); } else { let calDate = new Date(dob.getFullYear(), dob.getMonth() + 1, 0); return (today.getDate() + calDate.getDate()) - dob.getDate() - 1; } }()); month = (function() { if(today.getMonth() >= dob.getMonth()) { if(today.getDate() >= dob.getDate()) { return today.getMonth() - dob.getMonth(); } else { if((today.getMonth() - 1) >= dob.getMonth()) { return (today.getMonth() - 1) - dob.getMonth(); } else { return ((today.getMonth() - 1) + 12) - dob.getMonth(); } } } else { if(today.getDate() >= dob.getDate()) { return (today.getMonth() + 12) - dob.getMonth(); } else { return ((today.getMonth() - 1) + 12) - dob.getMonth(); } } }()); year = (function() { if(dob.getMonth() == today.getMonth()) { if(dob.getDate() > today.getDate()) { return (today.getFullYear() - 1) - dob.getFullYear(); } else { return today.getFullYear() - dob.getFullYear(); } } else { if(dob.getMonth() > today.getMonth()) { return (today.getFullYear() - 1) - dob.getFullYear(); } else { return today.getFullYear() - dob.getFullYear(); } } }()); HBD = (function(){ if(today.getMonth() == dob.getMonth()) { if(today.getDate() == dob.getDate()) { disBD.innerHTML = "OMG it's your Birthday<br>Happy Birthday To You<br>"; } else { disBD.innerHTML = ""; } } else { disBD.innerHTML = ""; } }()); display.innerHTML = "Hi Dear " + input[0].value + ", <br/>You are " + year + " Years, " + month + " Months, " + day + " Days, "; calTime = setInterval(samay, 1000); } button[0].onclick = calculate;//when calculate button is clicked function reset() { input[0].focus(); display.innerHTML = ""; time.innerHTML = null; clearInterval(calTime); = "none"; = "none"; } button[1].onclick = reset;//when the reset button is clicked </script>

STEP 3: Install CSS Codes

Now in the third step, you have to install a CSS Script below. So you have to copy it. Go to your Blogger’s layout section and add an ‘HTML widget’ and paste the CSS code in it and save it.

<style> @import url(''); body { background-color: gray; font-family: 'Gotu', sans-serif; color: white; } label { font-size: 20px; } form { text-align: center; } input { border: 0; padding: 10px 20px; font-size: 20px; border-radius: 50px; margin: 5px; } h2 { text-align: center; } button { padding: 10px; width: 300px; margin: 10px 0; font-size: 20px; border: 0; } button:focus, button:hover { background-color: blue; color: white; } p { text-align: center; } div { border: 1px solid white; background-color: blue; text-align: center; } #postCredit { background-color: white; color: blue; } a { text-decoration: none; color: black; display: block; padding: 10px; background-color: white; } a:hover { background-color: grey; } h1 { background-color: black; margin: 0 0 20px 0; padding: 10px; text-align: center; } </style>

STEP 4: Install HTML code

In the fourth and last step, We have given you some HTML code below, just copy it and paste into the new “HTML widget” from layout section.

<h1>Age Calculator Tool</h1> <h2>Hey Dear, What's your name? <br /><input type = "text" placeholder = "Enter Your Name" autofocus/></h2> <div id = "disBlock"> <p id = "disBD"></p> <p id = "display"></p> <p id = "time"></p> </div> <div id = "postCredit"> <p id = "credit"></p> <a id = "about" href="" target="_blank">Know More About Me</a> </div> <form> <label>Enter Your Date of Birth: <input type = "date"/></label><br /> <button type = "button">Calculate</button> <button type = "reset">Reset</button> </form> <p> Age Calculator Tool Online <a id="Moviespie" href="" target="_blank"> By </p>


If you follow all the steps carefully, you can make your own age calculator online tool in blogger very easily.

Related:  Dale Moss attends 'King’s Man' premiere with blogger Thania Peck

How did you like this article of How to Create Age Calculator Tool in Blogger Step by step complete guide? Give us some support by follow us on social media acconts.

Follow us on Twitter, InstagramReddit, and Google News for more latest news and updates.

Advertisement is now on Telegram. Click here to join our channel (@moviespie) and stay updated with the latest headlines.