Hello Friends, If You want to Create a Free Age Calculator tools in Blogger and make money online! Then your landing at right place. Here you can free download age calculator script for Blogger.
$ads={1}
As You know these kind of websites such as Online Age Calculator, DOB Calculator, or maybe you Also search as Age Calculator, Find my Age Calculator Online By Date Of Birth, Age by DOB, Or how to calculator my age on Google Search.
{tocify} $title={Table of Contents}
Friends, This kind of static website needed just a Javascript, besides you don’t need to add any content (post) 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.
So, without wasting time let's start the How to Create age calculator website in Blogger.
Today in this article you are going to learn how you can Create Age Calculator in Blogger? Friends we will know all things step by step, So stay in this page and know more the complete details. in this post, I will explained in detail how you can easily create an age calculator tool in Blogger using simple script code, CSS files and HTML codes.
What is Age Calculator tools
Nowadays Blogging is going another level. So in this blogging sector there are too many different sections to do. Age Calculator tools is one of Web Tools to calculate people age. Many Blooger like to easily create a Age Calculator Tool Online on Blogger 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.
How Create Age Calculator Tool in Blogger
Friends, not wasting your precious time, I have told you some simple steps for making a Free Age Calculator tool in Blogger.
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 part is to download the Blank Blogger Template. Click on the Download button below and open the .txt file copy the code and paste into the theme "HTML section" and save the theme.
{getButton} $text={Free Download} $icon={download}
You have a fully blank template installed and you will see a white screen when you visit your blog.{alertWarning}
Step #2: Use JavaScript
Here I have provided JavaScript code in the below box. You have to copy it and to go to Blogger Dashboard>Layout>Add a Gadget>HTML/JavaScript. Now past the code in the box.
<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");
disBlock.style.display = "none";
creditBlock.style.display = "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() {
disBlock.style.display = "block";
creditBlock.style.display = "block";
credit.innerHTML = "Thank You For Visiting<br>I am PixelNatures.in";
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);
disBlock.style.display = "none";
creditBlock.style.display = "none";
}
button[1].onclick = reset;//when the reset button is clicked
</script>
Step #3: Use CSS Code
You will find some CSS code below. So you have to copy and paste it easily by following the above steps #1 and save it.
<style>
@import url('https://fonts.googleapis.com/css?family=Gotu&display=swap');
body {
background-color: dodgerblue;
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: black;
color: white;
}
p {
text-align: center;
}
div {
border: 1px solid white;
background-color: black;
text-align: center;
}
#postCredit {
background-color: powderblue;
color: black;
}
a {
text-decoration: none;
color: black;
display: block;
padding: 10px;
background-color: white;
}
a:hover {
background-color: cyan;
}
h1 {
background-color: black;
margin: 0 0 20px 0;
padding: 10px;
text-align: center;
}
</style>
Step #4: Use html Code
Below We provide you html code please copy and past it following above mentioned steps.
<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="https://www.facebook.com/debashis121/" 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>
$ads={2}
Conclusion
Friends, If you follow all the steps carefully, then you can make your own Age Calculator tool in blogger very easily.
Are you like this article of “How to Create Age Calculator Tool in Blogger” Step by step complete guide. If you have any questions about this article please ask me in comment.
For more updates on Blogger Templats, Blogging tutorial like this, please Follow this Bolg.