Age Calculator Html Code For Bloggers And Wordpress

Blogger-এ Age Calculator টুল তৈরি করার পূর্ণাঙ্গ গাইড: আপনার ব্লগে ট্রাফিক বাড়ান সহজেই!

আপনি কি জানেন? বর্তমানে কেবল আর্টিকেল লিখে ব্লগে ট্রাফিক আনা বেশ কঠিন। কিন্তু আপনি যদি আপনার ব্লগে বিভিন্ন ইউটিলিটি টুলস (Utility Tools) যোগ করেন, তবে আপনার ব্লগের ট্রাফিক এবং এনগেজমেন্ট বহুগুণ বেড়ে যাবে। এর মধ্যে সবচেয়ে জনপ্রিয় একটি টুল হলো Age Calculator। সরকারি চাকরি থেকে শুরু করে বিভিন্ন স্কুল-কলেজে ভর্তির ফরম পূরণের সময় মানুষের নিখুঁত বয়স জানার প্রয়োজন হয়। আজকের এই মেগা গাইডে আমরা শিখব কীভাবে খুব সহজেই Blogger-এ একটি প্রফেশনাল Age Calculator টুল তৈরি করা যায়। Let's build something useful today!

Success Tip! টুলস ওয়েবসাইট বর্তমানে গুগল সার্চে খুব দ্রুত র‍্যাঙ্ক করে। একটি ভালো এজ ক্যালকুলেটর আপনার ব্লগের বাউন্স রেট (Bounce Rate) কমাতে এবং অ্যাডসেন্স ইনকাম বাড়াতে সাহায্য করবে।

এজ ক্যালকুলেটর (Age Calculator) টুল কেন ব্যবহার করবেন?

সাধারণত মানুষ ম্যানুয়ালি বছর, মাস এবং দিন হিসাব করতে ভুল করে ফেলে। একটি অটোমেটিক এজ ক্যালকুলেটর কয়েক সেকেন্ডের মধ্যে নির্ভুল তথ্য প্রদান করে। আপনার ব্লগে এই টুলটি থাকলে:

• ভিজিটররা বারবার আপনার সাইটে ফিরে আসবে।
• আপনার ব্লগের এসইও (SEO) স্কোর বৃদ্ধি পাবে।
• এটি একটি প্যাসিভ ইনকামের উৎস হতে পারে।

Technical Info: এই টুলটি তৈরি করতে আমরা HTML, CSS এবং JavaScript ব্যবহার করেছি। এটি সম্পূর্ণ রেসপন্সিভ, অর্থাৎ মোবাইল এবং পিসি উভয় ডিভাইসেই চমৎকার দেখাবে।

Blogger-এ Age Calculator সেটআপ করার ধাপসমূহ

নিচে দেওয়া সহজ ধাপগুলো অনুসরণ করে আপনি আপনার ব্লগারে এই টুলটি যুক্ত করতে পারেন। কোডিং না জানলেও কোনো সমস্যা নেই, জাস্ট কপি এবং পেস্ট করুন!

1. প্রথমে আপনার Blogger Dashboard-এ লগইন করুন।
2. বাম পাশের মেনু থেকে Pages অপশনে ক্লিক করুন এবং একটি 'New Page' তৈরি করুন।
3. পেজটির টাইটেল দিন "Age Calculator"।
4. পেজ এডিটরে থাকা পেনসিল আইকনে ক্লিক করে HTML View সিলেক্ট করুন।
5. নিচে দেওয়া কোডটি কপি করে সেখানে পেস্ট করে দিন।
6. পেজটি পাবলিশ করুন এবং আপনার কাজ শেষ!

Warning! কোড পেস্ট করার সময় নিশ্চিত হোন যে আপনি 'Compose View' তে নেই। অবশ্যই 'HTML View' তে কোডটি পেস্ট করতে হবে, নতুবা টুলটি কাজ করবে না।

Age Calculator Tool Demo

কাজ শুরু করার আগে আপনি যদি এই টুলের একটি ডেমো দেখতে চান, তবে নিচের বাটনে ক্লিক করুন:

View Live Demo

Age Calculator Code Section

নিচে দেওয়া বক্স থেকে সম্পূর্ণ কোডটি কপি করে নিন:

<style>
.base {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    float: none;
    max-width: 400px;
    margin: 20px auto;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.block {
    padding: 10px;
    display: flex;
    flex-direction: column;
}
input[type=text] {
    outline: none;
    min-height: 20px;
    border: 2px solid #1073d0;
    padding: 12px;
    border-radius: 7px;
    font-size: 17px;
}
input[type=text]:focus {
    background-color: #ffffff;
    border: 2px solid orange;
}
input[type=button] {
    width: 100%;
    margin-top: 20px;
    outline: none;
    border: none;
    border-radius: 6px;
    background-color: crimson;
    color: #ffffff;
    padding: 12px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}
input[type=button]:hover {
    background-color: #003669;
}
#age {
    text-align: center;
    margin-top: 25px;
    padding: 15px;
    font-family: verdana;
    font-size: 19px;
    color: #333;
    font-weight: bold;
    border-top: 2px dashed #ccc;
}
</style>

<div class="container">
  <form>
    <div class="base">
      <div class="enter"><h2 style="text-align:center;">Age Calculator</h2></div>
      <div class="block">
        <label>Date</label>
        <input type="text" name="date" id="date" placeholder="dd" required="required" maxlength="2" />
      </div>
      <div class="block">
        <label>Month</label>
        <input type="text" name="month" id="month" placeholder="mm" required="required" maxlength="2" />
      </div>
      <div class="block">
        <label>Year</label>
        <input type="text" name="year" id="year" placeholder="yyyy" required="required" maxlength="4" />
      </div>
      <input type="button" name="submit" value="Calculate Age" onclick="calculateAge()" />
      <div id="age"></div>
    </div>
  </form>
</div>

<script type="text/javascript">
function calculateAge() {
    var d1 = document.getElementById('date').value;
    var m1 = document.getElementById('month').value;
    var y1 = document.getElementById('year').value;

    if(d1 == "" || m1 == "" || y1 == ""){
        alert("Please enter your birth details!");
        return;
    }

    var date = new Date();
    var d2 = date.getDate();
    var m2 = 1 + date.getMonth();
    var y2 = date.getFullYear();
    var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    if (d1 > d2) {
        d2 = d2 + month[m2 - 1];
        m2 = m2 - 1;
    }
    if (m1 > m2) {
        m2 = m2 + 12;
        y2 = y2 - 1;
    }
    var d = d2 - d1;
    var m = m2 - m1;
    var y = y2 - y1;

    document.getElementById('age').innerHTML = 'Your Age is: <br>' + y + ' Years ' + m + ' Months ' + d + ' Days';
}
</script>
      

Common Error! অনেক সময় কিছু থিমে জাভাস্ক্রিপ্ট (JavaScript) অটোমেটিক ডিজেবল করা থাকে। যদি বাটন ক্লিক করার পর কাজ না করে, তবে থিম সেটিংসে গিয়ে জাভাস্ক্রিপ্ট অন আছে কি না চেক করুন।

এই টুলের কিছু প্রিমিয়াম বৈশিষ্ট্য

আমাদের এই এজ ক্যালকুলেটর টুলটি কেবল একটি সাধারণ স্ক্রিপ্ট নয়, এতে রয়েছে কিছু বিশেষ ফিচার:

• Clean UI: খুব সিম্পল এবং প্রফেশনাল ডিজাইন যা যেকোনো ব্লগে মানিয়ে যাবে।
• Accuracy: এটি লিপ ইয়ার এবং মাস অনুযায়ী নিখুঁত হিসাব প্রদান করে।
• Lightweight: এটি সাইজের অনেক ছোট, ফলে আপনার ব্লগের লোডিং স্পিড কমবে না।

এসইও টিপস: কীভাবে টুলটি গুগলে র‍্যাঙ্ক করাবেন?

টুলটি পেস্ট করার পর কিছু কাজ করলে আপনি দ্রুত র‍্যাঙ্কিং পাবেন:

• Keyword Research: পেজের মেটা ডেসক্রিপশনে "Age Calculator for Jobs", "Exact Birth Date Calculator" এর মতো কি-ওয়ার্ড ব্যবহার করুন।
• Internal Linking: আপনার অন্যান্য ব্লগে এই পেজের লিংক যুক্ত করুন।
• Social Sharing: ফেসবুক বা টেলিগ্রামে টুলটি শেয়ার করুন যাতে ডিরেক্ট ভিজিটর আসে।

উপসংহার

ব্লগার এখন আর কেবল ডায়েরি লেখার জায়গা নয়, এটি একটি পাওয়ারফুল বিজনেস প্ল্যাটফর্ম হতে পারে যদি আপনি সঠিক টুলস ব্যবহার করতে জানেন। আশা করি আজকের এই Age Calculator Tool Setup গাইডটি আপনাদের ভালো লেগেছে। এই টুলটি আপনার ব্লগে যোগ করার পর ট্রাফিক কেমন বাড়ছে তা আমাদের কমেন্ট করে জানাতে ভুলবেন না।

Conclusion Verdict: একটি ভালো টুল আপনার ব্লগের ব্র্যান্ড ভ্যালু কয়েক গুণ বাড়িয়ে দেয়। আজই এটি ট্রাই করুন এবং আপনার ব্লগকে প্রফেশনাল করে তুলুন। Team TrickyBD.com এর পক্ষ থেকে শুভকামনা!

---

সচরাচর জিজ্ঞাসিত প্রশ্ন (FAQ)

১. এটি কি সব ব্লগার থিমে কাজ করবে?
উত্তর: হ্যাঁ, এটি যেকোনো ব্লগার থিমের (Plus UI, Median UI, etc.) সাথে অনায়াসেই কাজ করবে।

২. এই টুলটি কি মোবাইল ফ্রেন্ডলি?
উত্তর: হ্যাঁ, এর সিএসএস এমনভাবে ডিজাইন করা হয়েছে যা মোবাইলের স্ক্রিন অনুযায়ী নিজেকে অ্যাডজাস্ট করে নেয়।

৩. আমি কি এই পেজে গুগল অ্যাডসেন্স ব্যবহার করতে পারব?
উত্তর: অবশ্যই! আপনি এই পেজের উপরে বা নিচে অ্যাডসেন্স কোড বসিয়ে সহজেই ইনকাম করতে পারবেন।

Go to Link