নিজের Task Earning Website বানিয়ে Adsterra থেকে ইনকাম করুন।

প্রথমে Blogger Dashboard-এ গিয়ে আপনার ব্লগের Pages অথবা Posts সেকশনে যান এবং একটি নতুন পোস্ট তৈরি করুন। এরপর HTML View সিলেক্ট করুন। এখান থেকেই আপনার কোডটি পেস্ট করতে পারবেন।

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

Background Color: আপনার ব্লগের লুক-এর সাথে মিলিয়ে background-color পরিবর্তন করতে পারেন।
Button Styling: আপনার Blogger থিমের সাথে মিলিয়ে .button CSS ক্লাসের background-color, font-size, এবং padding পরিবর্তন করুন।

Blogger-এর HTML এডিটর সাধারণত একক লাইন CSS যুক্ত করতে সাহায্য করে। তবে, যদি আপনার কোডটি বড় হয়, তাহলে style ট্যাগটি <head> সেকশনে যোগ করতে পারেন।

<style>
  /* CSS কোড এখানে */
</style>

Blogger-এ JavaScript যোগ করার জন্য <script> ট্যাগ ব্যবহার করতে হবে। Blogger সাধারণত Google বা jQuery এর মতো CDN থেকে JavaScript কোড গ্রহণ করে। তবে, আপনি সরাসরি স্ক্রিপ্ট যুক্ত করতে পারেন যদি এটি ছোট ও সহজ হয়।

<script>
  // JavaScript কোড এখানে
</script>

এই কোডটির মাধ্যমে আপনার ব্লগে একটি Balance এবং Withdraw সিস্টেম তৈরি করা যাবে। ব্যালেন্স আপডেট করার জন্য এবং টাস্ক কমপ্লিট হওয়ার পর ব্যালেন্স দেখানোর জন্য JavaScript ব্যবহৃত হয়েছে। Blogger পোস্টে এটি ঠিকমতো কাজ করবে।

ক্যাপচা লিখে প্রতিদিন ৫০০ টাকা ইনকাম করার সহজ উপায়

সঠিক কোড যুক্ত করার পর, Preview এ ক্লিক করে পোস্টটি পরীক্ষা করে দেখুন। সবকিছু ঠিক থাকলে Publish এ ক্লিক করুন।

বিশেষ দ্রষ্টব্য: এই কোডটা ডেইলি আপডেট করা হয় কোন ধরনের প্রবলেম হলে সেটা সলভ করা হয়

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Balance & Withdraw</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f7fc;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #333;
    }

    .container {
      max-width: 500px;
      width: 100%;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      margin-top: 20px;
    }

    h2 {
      color: #3c3c3c;
      font-size: 24px;
      font-weight: 600;
      margin: 20px 0;
    }

    .button {
      padding: 12px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin: 5px;
      width: 100%;
      max-width: 200px;
      transition: background-color 0.3s, transform 0.2s;
    }

    .button:hover {
      background-color: #0056b3;
      transform: translateY(-3px);
    }

    .button:disabled {
      background-color: #ddd;
      cursor: not-allowed;
    }

    .input-field {
      padding: 10px;
      width: 100%;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin: 10px 0;
    }

    .balance-container, .buttons-container {
      margin-top: 20px;
    }

    .timer {
      font-size: 18px;
      color: #f44336;
      font-weight: bold;
      margin-top: 10px;
    }

    .alert {
      background-color: #ff9800;
      color: white;
      padding: 10px;
      margin: 15px 0;
      border-radius: 5px;
      display: none;
    }

    #login-register-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    #login-register-container .button {
      width: 45%;
    }

    .card {
      background: #f7f7f7;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .container {
        padding: 20px 15px;
      }

      .button {
        padding: 10px;
        font-size: 14px;
      }

      h2 {
        font-size: 20px;
      }

      .timer {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

<div class="container">
  <div id="login-register-container">
    <button id="registerButton" class="button">Register</button>
    <button id="loginButton" class="button">Login</button>
  </div>

  <div id="email-container" style="display:none;">
    <h2>Enter your email to start:</h2>
    <input type="email" id="userEmail" class="input-field" placeholder="Enter email" required>
    <button id="submitEmail" class="button">Submit</button>
  </div>

  <div id="balance-container" class="balance-container" style="display: none;">
    <h2>Your Current Balance:</h2>
    <div class="card">
      <p id="balance" style="font-size: 24px; font-weight: bold;">0</p>
      <button id="withdraw" class="button">Withdraw</button>
    </div>
  </div>

  <div id="buttons-container" class="buttons-container" style="display: none;">
    <h2>Earn Points:</h2>
    <button class="button" onclick="visitSiteAndEarnPoints('https://example1.com', 'Visit 1')">Visit Site 1</button>
    <button class="button" onclick="visitSiteAndEarnPoints('https://example2.com', 'Visit 2')">Visit Site 2</button>
    <button class="button" onclick="visitSiteAndEarnPoints('https://example3.com', 'Visit 3')">Visit Site 3</button>
  </div>

  <p id="timer" class="timer"></p>
</div>

<script>
  let balance = 0;
  let userEmail = "";
  const visitHistory = {};

  document.getElementById("registerButton").addEventListener("click", () => handleUserRegistration());
  document.getElementById("loginButton").addEventListener("click", () => handleUserLogin());

  function handleUserRegistration() {
    document.getElementById("login-register-container").style.display = "none";
    document.getElementById("email-container").style.display = "block";
    document.getElementById("submitEmail").addEventListener("click", () => {
      const email = document.getElementById("userEmail").value;
      if (email) {
        userEmail = email;
        localStorage.setItem("userEmail", userEmail);
        document.getElementById("email-container").style.display = "none";
        document.getElementById("balance-container").style.display = "block";
        document.getElementById("buttons-container").style.display = "block";
      }
    });
  }

  function handleUserLogin() {
    document.getElementById("login-register-container").style.display = "none";
    document.getElementById("email-container").style.display = "block";
    document.getElementById("submitEmail").addEventListener("click", () => {
      const email = document.getElementById("userEmail").value;
      if (localStorage.getItem("userEmail") === email) {
        userEmail = email;
        balance = parseInt(localStorage.getItem("balance") || "0");
        document.getElementById("balance").innerText = balance;
        document.getElementById("email-container").style.display = "none";
        document.getElementById("balance-container").style.display = "block";
        document.getElementById("buttons-container").style.display = "block";
      }
    });
  }

  function visitSiteAndEarnPoints(url, buttonId) {
    if (visitHistory[buttonId]) return alert("You can only click this button once per day.");

    const newTab = window.open(url, '_blank');
    let timer = 20;
    document.getElementById("timer").innerText = `Time remaining: ${timer}s`;

    const interval = setInterval(() => {
      timer--;
      document.getElementById("timer").innerText = `Time remaining: ${timer}s`;

      if (newTab.closed) {
        clearInterval(interval);
        document.getElementById("timer").innerText = ""; 
        return;
      }

      if (timer === 0) {
        clearInterval(interval);
        balance += 20;
        document.getElementById("balance").innerText = balance;
        localStorage.setItem("balance", balance);
        visitHistory[buttonId] = Date.now();
        document.getElementById("timer").innerText = ""; 
      }
    }, 1000);
  }

  document.getElementById("withdraw").addEventListener("click", () => {
    if (balance >= 1000) {
      window.open("https://forms.gle/uNdC6dq6hqzrLnB79", "_blank");
      balance = 0;
      document.getElementById("balance").innerText = balance;
    } else {
      alert("You need at least 1000 points to withdraw.");
    }
  });
</script>
</body>
</html>

Blogger-এ HTML, CSS এবং JavaScript কোড সংযোজন এবং কাস্টমাইজ করা একটি সহজ প্রক্রিয়া। উপরের ধাপগুলো অনুসরণ করে আপনি সহজেই কোডটি ব্লগ পোস্টে ব্যবহার করতে পারবেন এবং এটি আপনার ব্লগের জন্য একটি আকর্ষণীয় ইন্টারফেস তৈরি করবে।

নিজের Task Earning Website বানিয়ে Adsterra থেকে ইনকাম করুন।

Important Links

Shopping cart

নিজের Task Earning Website বানিয়ে Adsterra থেকে ইনকাম করুন।

Related Posts

মোবাইল দিয়ে অনলাইন ইনকাম 2024: সহজ উপায় ও বিকাশ পেমেন্ট সুবিধা

ভিডিও না বানিয়ে ইউটিউব থেকে ইনকাম 2024: কিভাবে সম্ভব?

মোবাইলে ডাটা এন্ট্রি কাজ: শিখুন এবং ফ্রিল্যান্সিংয়ে আয় করুন

Important Links

Shopping cart