بلاگر پر عمر کیلکولیٹر ٹول ویب سائٹ بنانے کا طریقہ
بلاگر پر عمر کیلکولیٹر ٹول ویب سائٹ بنانے کا طریقہ
بلاگر کی ویب سائٹ پر عمر کا کیلکولیٹر کیسے بنایا جائے ۔ ہم عمر کیلکولیٹر بنانے سے متعلق اس مضمون میں ان تمام چیزوں کو جانیں گے ۔
آج کل بلاگنگ صرف ایک سطح پر ہے۔ تو ایسی صورتحال میں بلاگنگ کے شعبے میں مختلف شعبہ جات ہیں۔ لہذا، بہترین میں سے ایک ٹول ویب سائٹ ہے۔ میرے بہت سے سبسکرائبرز نے تبصرے میں مجھ سے پوچھا ہے کہ ہم بلاگر/بلاگ سپاٹ پلیٹ فارم پر عمر کیلکولیٹر کی ویب سائٹ کیسے بنا سکتے ہیں؟
میں آپ کو واضح طور پر بتاتا چلوں کہ ایج کیلکولیٹر کا ایک مختلف ٹرینڈ چل رہا ہے۔ تو ایسی صورت حال میں، ہر کوئی چاہتا ہے کہ اس کا اپنا عمر کیلکولیٹر ٹول ہو۔ تو ایسی صورتحال میں، میں نے اس پوسٹ میں تفصیل سے بتایا ہے کہ آپ عمر کے حساب کتاب کا آلہ کس طرح آسانی سے بنا سکتے ہیں۔
عمر کیلکولیٹر ٹول کیا ہے؟
بہت سے نئے بلاگرز ہیں جو ابھی بلاگنگ کے میدان میں داخل ہوئے ہیں۔ وہ کون سے ہیں جو اس بلاگنگ انڈسٹری میں کچھ نیا کریں؟ تو ایسی صورت حال میں تمام لوگ بس یہی چاہتے ہیں کہ سب کچھ مختلف ہو۔ تو ایسی صورت حال میں ایج کیلکولیٹر کے نام سے ایک ٹول آتا ہے۔
بہت سے لوگ اس ٹول کے بارے میں نہیں جانتے۔ تو میں انہیں بتاتا چلوں کہ ایج کیلکولیٹر ٹول کی مدد سے ہم آسانی سے اپنی عمر معلوم کر سکتے ہیں۔ ویسے عمر کتنی ہے اور مزید معلومات نکالنے کے کئی طریقے ہیں۔ لیکن اگر آپ اس ٹول کو استعمال کرتے ہیں تو آپ ایک چٹکی میں اپنی صحیح عمر معلوم کر سکتے ہیں۔
بلاگر میں ایج کیلکولیٹر ٹول بنائیں
اب میں نے آپ کو ذیل میں کچھ اقدامات بتائے ہیں۔ جس پر عمل کرکے آپ آسانی سے اپنے بلاگر یا بلاگ میں اس عمر کیلکولیٹر ٹول کو مفت میں بنا سکتے ہیں۔ ویسے آپ کو انٹرنیٹ پر اس ایج کیلکولیٹر ٹول سے متعلق بہت سی ٹول ویب سائٹس مل جاتی ہیں۔
زیادہ تر ڈیزائن مختلف ہیں۔ تو ایسی صورت حال میں، میں نے ذیل میں آپ کو جو ٹول فراہم کیا ہے وہ بالکل منفرد ہے۔ میں نے ذیل میں اس ٹول کو بنانے کے لیے HTML، CSS اور JavaScript کوڈ فراہم کیا ہے۔ اور آپ کو تمام مراحل پر عمل کرنا ہوگا۔
مرحلہ نمبر 1 – بلاگر خالی ٹیمپلیٹ ڈاؤن لوڈ اور انسٹال کریں۔
میں نے نیچے کوڈ باکس میں خالی بلاگر ٹیمپلیٹ فراہم کیا ہے۔ اس کوڈ کو بلاگر ڈیش بورڈ پر جا کر کاپی کریں۔ تھیم سیکشن پر کلک کریں، تمام کوڈ ڈیلیٹ کریں اور اب نیا کوڈ پیسٹ کرنے کے لیے ctrl+v دبائیں۔
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
body{background:#fff}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'/>
</body>
</html>
مرحلہ نمبر 2 - جاوا اسکرپٹ استعمال کریں۔
تو دوستو اب میں نے جاوا اسکرپٹ کوڈ نیچے دیے گئے باکس میں دیا ہے۔ آپ کو اسے کاپی کرنا ہوگا۔ اب آپ کو بلاگر ڈیش بورڈ>لے آؤٹ>ایک گیجٹ شامل کریں>HTML/جاوا اسکرپٹ پر جانا ہوگا۔ آپ نے اپنا کوڈ کاپی کیا۔ اس کوڈ کو پیسٹ کریں اور اسے کریں۔
<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>www.pk24jobs.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);
disBlock.style.display = "none";
creditBlock.style.display = "none";
}
button[1].onclick = reset;//when the reset button is clicked
</script>
مرحلہ نمبر 3 - CSS استعمال کریں۔
اب آپ کو نیچے کچھ سی ایس ایس اسکرپٹ بھی ملے گی۔ لہذا آپ کو بھی مندرجہ بالا مراحل پر عمل کرکے اسے آسانی سے کاپی اور پیسٹ کرنا ہوگا اور اسے محفوظ کرنا ہوگا۔
<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>
مرحلہ نمبر 4 - HTML استعمال کریں۔
اب میں نے آپ کو ذیل میں کچھ ایچ ٹی ایم ایل اسکرپٹس دی ہیں اور اوپر دیے گئے مراحل پر عمل کرتے ہوئے انہیں کاپی اور پیسٹ کریں۔
<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.pk24jobs.com/" target="_blank">Know More About US</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>
نتیجہ : - اردو میں بلاگر میں عمر کیلکولیٹر ٹول کیسے بنائیں کا یہ مضمون آپ کو کیسا لگا ۔ آپ نیچے کمنٹ باکس میں تبصرہ کرکے ضرور بتائیں۔ یا اگر آپ کسی قسم کی کوئی تجویز دینا چاہتے ہیں تو نیچے کمنٹ باکس میں اپنی رائے ہمارے ساتھ شیئر کر سکتے ہیں۔
0 Comments