How to Add a Secure Password Generator Tool to Your Blogger Website (With HTML, CSS & JavaScript)

How to Add a Secure Password Generator Tool to Your Blogger Website

🔐 Add a Secure Password Generator Tool to Your Blogger Website

Do you want to add a password generator tool to your Blogger website? With this easy tutorial, you’ll learn how to add a secure and responsive password generator using only HTML, CSS, and JavaScript — no external libraries or frameworks needed!

---

📌 Why Add a Password Generator to Your Blog?

• ✔️ Helps your visitors create secure, strong passwords instantly
• ✔️ Improves your site's usefulness and engagement
• ✔️ Adds a free tool that enhances your site's value for SEO and AdSense
• ✔️ Requires zero hosting or backend

---

🛠️ Step-by-Step: How to Add It in Blogger

Follow these simple steps:

1. Go to your Blogger Dashboard
2. Click New Post and select HTML View
3. Copy and paste the following full code block
4. Publish the post and see the magic!

---

✅ Full Copy-Paste Code for Blogger:

<div style="display:flex; justify-content:center; margin-top: 30px;">
  <div class="password-generator">
    <h3>Generate a Secure Password</h3>

    <div class="options">
      <label><input type="checkbox" id="lowercase" checked /> Lowercase (a-z)</label>
      <label><input type="checkbox" id="uppercase" checked /> Uppercase (A-Z)</label>
      <label><input type="checkbox" id="numbers" checked /> Numbers (0-9)</label>
      <label><input type="checkbox" id="symbols" checked /> Special Characters (@#$%^&*)</label>
      <label>Password Length:
        <select id="length">
          <option value="8">8</option>
          <option value="10">10</option>
          <option value="12" selected>12</option>
          <option value="16">16</option>
          <option value="20">20</option>
        </select>
      </label>
    </div>

    <input type="text" id="password-output" placeholder="Generated password will appear here" readonly />

    <div class="btn-group">
      <button onclick="generatePassword()">Generate</button>
      <button onclick="copyPassword()">Copy</button>
    </div>
    <p id="copy-msg" style="display:none; color:green; font-size: 14px; margin-top:10px;">Password copied to clipboard!</p>
  </div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
.password-generator {
  background: #fff;
  border: 1px solid #ddd;
  padding: 25px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
  font-family: 'Roboto', sans-serif;
}
.password-generator h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
}
.options {
  text-align: left;
  margin-bottom: 15px;
  font-size: 15px;
}
.options label {
  display: block;
  margin-bottom: 6px;
  color: #444;
}
.password-generator input[type="text"] {
  width: 100%;
  height: 45px;
  padding: 0 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 15px;
}
.btn-group {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.btn-group button {
  flex: 1;
  padding: 10px;
  background-color: #4954f2;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
.btn-group button:hover {
  background-color: #343ccf;
}
</style>

<script>
function generatePassword() {
  const includeLower = document.getElementById("lowercase").checked;
  const includeUpper = document.getElementById("uppercase").checked;
  const includeNumber = document.getElementById("numbers").checked;
  const includeSymbol = document.getElementById("symbols").checked;
  const length = parseInt(document.getElementById("length").value);

  const lower = "abcdefghijklmnopqrstuvwxyz";
  const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const numbers = "0123456789";
  const symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?";

  let allowedChars = "";
  if (includeLower) allowedChars += lower;
  if (includeUpper) allowedChars += upper;
  if (includeNumber) allowedChars += numbers;
  if (includeSymbol) allowedChars += symbols;

  if (allowedChars === "") {
    alert("Please select at least one character type.");
    return;
  }

  let password = "";
  for (let i = 0; i < length; i++) {
    const index = Math.floor(Math.random() * allowedChars.length);
    password += allowedChars.charAt(index);
  }

  document.getElementById("password-output").value = password;
  document.getElementById("copy-msg").style.display = "none";
}

function copyPassword() {
  const passField = document.getElementById("password-output");
  passField.select();
  passField.setSelectionRange(0, 99999);
  document.execCommand("copy");

  const msg = document.getElementById("copy-msg");
  msg.style.display = "block";
  setTimeout(() => {
    msg.style.display = "none";
  }, 2000);
}
</script>

🎉 Final Result

You now have a working password generator on your Blogger website — ready to serve and secure your visitors!