How to add Login and Signup feature in Blogger using Firebase

Blogger is a great platform to start a website but Blogger doesn't have some amazing features like login and signup feature. Adding a login feature to your Blogger website can improve user-experience. We can use Firebase to add the login feature in Blogger. Firebase gives simple and secure way to add a login feature on your Blogger website. Firebase supports wide range of authentication methods like email and password, Google and more.

In this tutorial, we will discuss the process of implementing a login feature on the Blogger website using Firebase. For implementing this login feature you just need basic knowledge of HTML and patience to read and understand this process. Here we will provide all from Firebase setting up to implementing a login feature on a Blogger website.

After following this tutorial you get a fully functional login and signup feature that users can register, login, view profile option with edit functionality. Using this login feature you can add exclusive features that are only available for logged users like the bookmark feature which only show for logged users and it stores data on the user's account. We will share the tutorial about adding a bookmark in the next article. So without wasting much time let's check.

How to add Login feature in Blogger using Firebase?

Setting up Firebase

1. First of all visit Firebase Console
2. Click "Create a Project" option
3. Name your project and click "Continue" button
4. Enable or disable Google Analytics as you like then click "Continue"
5. After Completing the creation, click" Continue" button
6. Open sidebar menu then click on "Build" then click on "Authentication"
7. Click on "Get Started" button in the Authentication page.
8. Go to "Sign-in method" then click on "Email/Password" then enable it then click "Save"
9. Click on "Add new provider" then choose "Google" then enable it then choose support email then click "Save"
10. Click on "Settings" tab
11. Click on "Authorised domains"
12. Click on "Add domain"
13. Enter your website domain, then click "Add"
14. Click on "Build" in sidebar menu
15. Click on "Firestore Database" from inside the "Build" menu
16. Click on "Create Database" in Firestore Database page
17. Now a popup came, click "Next"
18. Then make sure it is in "Production mode" then click "Create"
19. Now go to "Rules" tab
20. Remove old rule and paste the rule given below

service cloud.firestore {
  match /databases/{database}/documents {
    // Allow read and write only to authenticated users
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

21. After adding new rule, click on "Publish" button
22. Click on settings gear icon near "Project Overview" in the sidebar
23. Click on "Project settings"
24. Click on icon from "Your apps" in "Project settings"
25. Name the web app then click "Register App"
26. Then copy the code given by Firebase from const firebaseconfig = { to }; (example given below) then note the code any where then Click "Next"

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
};

27. Click again "Next"
28. Click on "Continue to Console"

Now you can close Firebase window in your browser.

Implementation in your Blogger website

1. First of all go to your Blogger dashboard
2. Click on "Theme" option in the sidebar
3. Click on drop-down arrow icon near Customize option
4. Click on "Edit HTML"
5. Find </head> tag then paste the following JS above it

<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css' rel='stylesheet'/>
         
<script 
    src='https://www.gstatic.com/firebasejs/11.1.0/firebase-app-compat.js'/>

<script 
    src='https://www.gstatic.com/firebasejs/11.1.0/firebase-auth-compat.js'/>

<script 
    src='https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore-compat.js'/>

6. Add <script>/*<![CDATA[*/ below it
7. Add we copied and noted firebaseconfig js below it, then add following JS below it

/*---
    User Authentication and Profile JS
    Created by: IncredibleGad
  Source code: https://www.incrediblegad.in/2025/01/how-to-add-login-feature-in-blogger.html
  ---*/
  firebase.initializeApp(firebaseConfig);
    const auth = firebase.auth();
auth.onAuthStateChanged(e => {
    const t = document.getElementById("loginLink"),
          o = document.getElementById("dashboardLink"),
          i = document.getElementById("userProfileImage");

    if (e) {
        if (t) t.style.display = "none";
        if (o) o.style.display = "inline-block";

        if (e.providerData[0].providerId === "google.com" && i) {
            i.src = e.photoURL;
            i.alt = e.displayName;
            i.style.display = "block";
        }
    } else {
        if (t) t.style.display = "inline-block";
        if (o) o.style.display = "none";
    }
});

8. Add /*]]>*/</script> to close it
9. Save the HTML by clicking save icon on the top
10. Click on "Pages" from sidebar
11. Then create followings pages by switching to HTML view and pasting the codes given below on specific pages



Login page

  <style>
    .auth-form-container {
      width: 100%;
      border: 1px solid #e4e3e1;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      color: #475569;
      text-align: center;
    }

    .auth-form-container h2 {
      margin-bottom: 20px;
    }

    .auth-form-container label {
      display: block;
      font-weight: bold;
      margin-bottom: 10px;
      color: #475569;
    }

    .auth-form-container input,
    .auth-form-container textarea {
      width: 100%;
      padding: 12px;
      margin-bottom: 20px;
      border: 1px solid #e4e3e1;
      border-radius: 4px;
      color: #475569;
    }

    .auth-form-container input:focus,
    .auth-form-container textarea:focus {
      outline: none;
      border-color: #6366f1;
    }

    .auth-form-container button {
      width: 100%;
      padding: 12px;
      margin-top: 10px;
      border: none;
      border-radius: 4px;
      background-color: #6366f1;
      color: white;
      cursor: pointer;
      font-size: 16px;
    }

    .auth-form-container button:hover {
      background-color: #5a54cc;
    }

    .auth-form-container p {
      margin-top: 15px;
      color: #475569;
    }

    .auth-form-container a {
      color: #0b57cf;
      text-decoration: none;
    }

    .auth-form-container a:hover {
      text-decoration: underline;
    }

    .auth-form {
      display: block;
    }

    .profile-img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
    }

    .auth-form-container svg {
      fill: #334155;
    }

    .google-btn {
      background-color: transparent !important;
      border: 1px solid #e4e3e1 !important;
      color: #475569 !important;
    }

    #loginform input,
    #loginform button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .forgot-password {
      text-align: center;
      margin: 10px 0;
    }
  </style>

  <div class="auth-form-container">
    <form id="loginForm">
      <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z"/>
        <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"/>
      </svg>
      <input type="email" id="email" placeholder="Email" required>
      <input type="password" id="password" placeholder="Password" required>

      <button type="submit">Login</button>
    </form>
    <button class="google-btn" id="googleLogin"><i class="bi bi-google"></i> Login with Google</button>

    <!-- Forgot Password -->
    <div class="forgot-password">
      <a href="#" id="forgotPassword">Forgot Password?</a>
    </div>

    <p>Don't have an account? <a href='/p/signup.html'>Create</a></p>
  </div>

  <!-- Login JS | incrediblegad.in -->
  <script>
  const db = firebase.firestore();
  document.getElementById("loginForm").addEventListener("submit", async e => {
      e.preventDefault();
      const t = document.getElementById("email").value,
            n = document.getElementById("password").value;
      try {
        await auth.signInWithEmailAndPassword(t, n);
        alert("Logged in successfully!");
        window.location.href = "/p/dashboard.html";
      } catch (e) {
        alert("Error: " + e.message);
        console.error(e);
      }
    });

    document.getElementById("googleLogin").addEventListener("click", async () => {
      const e = new firebase.auth.GoogleAuthProvider();
      try {
        const t = await auth.signInWithPopup(e);
        alert(`Logged in as: ${t.user.displayName}`);
        window.location.href = "/p/dashboard.html";
      } catch (e) {
        alert("Error: " + e.message);
        console.error(e);
      }
    });

    document.getElementById("forgotPassword").addEventListener("click", async () => {
      const e = prompt("Please enter your email for password reset:");
      if (e) {
        try {
          await auth.sendPasswordResetEmail(e);
          alert("Password reset email sent. Please check your inbox.");
        } catch (e) {
          alert("Error: " + e.message);
          console.error(e);
        }
      }
    });

    auth.onAuthStateChanged(e => {
      if (e) {
        window.location.href = "/p/dashboard.html";
      }
    });
  </script>

Sign up page

  <style>
    /* incrediblegad.in *//*-- Auth Form --*/
    .auth-form-container {
      width: 100%;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      border: 1px solid #e4e3e1;
      color: #475569;
      text-align: center;
    }
    .auth-form-container h2 {
      margin-bottom: 20px;
    }
    .auth-form-container label {
      display: block;
      font-weight: bold;
      margin-bottom: 10px;
      color: #475569;
    }
    .auth-form-container input,
    .auth-form-container textarea {
      width: 100%;
      padding: 12px;
      margin-bottom: 20px;
      border: 1px solid #e4e3e1;
      border-radius: 4px;
      color: #475569;
    }
    .auth-form-container input:focus,
    .auth-form-container textarea:focus {
      outline: none;
      border-color: #6366f1;
    }
    .auth-form-container button {
      width: 100%;
      padding: 12px;
      margin-top: 10px;
      border: none;
      border-radius: 4px;
      background-color: #6366f1;
      color: white;
      cursor: pointer;
      font-size: 16px;
    }
    .auth-form-container button:hover {
      background-color: #5a54cc;
    }
    .auth-form-container p {
      margin-top: 15px;
      color: #475569;
    }
    .auth-form-container a {
      color: #0b57cf;
      text-decoration: none;
    }
    .auth-form-container a:hover {
      text-decoration: underline;
    }
    .auth-form {
      display: block;
    }
    .profile-img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
    }
    .auth-form-container svg {
      fill: #334155 !important;
    }
    .google-btn {
      background-color: transparent !important;
      border: 1px solid #e4e3e1 !important;
      color: #475569 !important;
    }
    #passwordError {
      color: #f44336;
      display: none;
    }
    .password-container {
      position: relative;
    }
    .password-container input {
      width: 100%;
      padding-right: 30px;
    }
    .eye-icon {
      position: absolute;
      right: 10px;
      top: 35%;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .show-password-container {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .auth-form-container .info {
      font-size: 12px;
    }
  </style>

  <div class="auth-form-container">
    <form id="signupForm">
      <svg class="bi bi-person-plus" height="80" viewBox="0 0 16 16" width="80" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z">
        <path d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5" fill-rule="evenodd">
      </svg>
      <input id="firstName" required type="text" placeholder="First Name">
      <input id="lastName" required type="text" placeholder="Last Name">
      <input id="email" required type="email" placeholder="Email">

      <div class="password-container">
        <input id="password" required type="password" placeholder="Password">
        <i id="togglePassword" class="bi bi-eye eye-icon"></i>
      </div>

      <div class="password-container">
        <input id="confirmPassword" required type="password" placeholder="Confirm Password">
        <i id="toggleConfirmPassword" class="bi bi-eye eye-icon"></i>
      </div>
      <small id="passwordError">Passwords do not match or don't meet the criteria.</small>
      <button class="ig-button" type="submit">Sign Up</button>
    </form>

    <button class="google-btn" id="googleSignUp">
      <i class="bi bi-google"></i> Sign Up with Google
    </button>

    <p class='info'>By creating your account, you agree to the <a href="/p/privacy-policy.html" target="_blank">Privacy Policy</a>.</p>
    
    <p>Have an account? <a href="/p/login.html">Login</a></p>
  </div>

  <script>
  /* Signup | incrediblegad.in */
  function validatePassword(e){
    return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(e)}
    async function handleSignup(e){
      e.preventDefault();
      const t=document.getElementById("firstName").value.trim(),
      n=document.getElementById("lastName").value.trim(),
      o=document.getElementById("email").value.trim(),
      r=document.getElementById("password").value.trim(),
      a=document.getElementById("confirmPassword").value.trim(),
      s=document.getElementById("passwordError");
      
      if(!t||!n){
        alert("First Name and Last Name are required.");
        return;
      }
      
      if(!validatePassword(r)){
        s.textContent="Password must have at least 8 characters, uppercase, lowercase, number, and special character.",
        s.style.display="block";
        return;
      }
      
      if(r!==a){
        s.textContent="Passwords do not match.",
        s.style.display="block";
        return;
      }

      s.style.display="none";
      
      try{
        const e=await auth.createUserWithEmailAndPassword(o,r),
        i=e.user;
        await i.updateProfile({displayName:`${t} ${n}`}),
        await db.collection("users").doc(i.uid).set({firstName:t,lastName:n,email:o,createdAt:firebase.firestore.FieldValue.serverTimestamp()}),
        await i.sendEmailVerification(),
        alert("Signup successful! A verification email has been sent. Please check your inbox."),
        window.location.href="/p/dashboard.html"
      }catch(e){
        console.error("Signup Error:",e),
        alert(`Error: ${e.message||"An unknown error occurred."}`)
      }
    }

    async function handleGoogleSignup(){
      const e=new firebase.auth.GoogleAuthProvider;
      try{
        const t=await auth.signInWithPopup(e),
        n=t.user;
        if(t.additionalUserInfo.isNewUser){
          const[e,o]=(n.displayName||"").split(" ")||["",""];
          await db.collection("users").doc(n.uid).set({firstName:e||"",lastName:o||"",email:n.email,createdAt:firebase.firestore.FieldValue.serverTimestamp()})
        }
        alert(`Welcome ${n.displayName}! Redirecting to your dashboard...`),
        window.location.href="/p/dashboard.html"
      }catch(e){
        console.error("Google Signup Error:",e),
        alert(`Error: ${e.message||"An unknown error occurred."}`)
      }
    }

    function togglePassword(e,t){
      const n=document.getElementById(e),o=document.getElementById(t);
      "password"===n.type?(n.type="text",o.classList.replace("bi-eye","bi-eye-slash")):(n.type="password",o.classList.replace("bi-eye-slash","bi-eye"))
    }

    document.getElementById("signupForm").addEventListener("submit",handleSignup),
    document.getElementById("googleSignUp").addEventListener("click",handleGoogleSignup),
    document.getElementById("togglePassword").addEventListener("click",()=>togglePassword("password","togglePassword")),
    document.getElementById("toggleConfirmPassword").addEventListener("click",()=>togglePassword("confirmPassword","toggleConfirmPassword")),
    auth.onAuthStateChanged(e => {e && (window.location.href = "/p/dashboard.html")});
  </script>
  

Dashboard page

<style>
/* Dashboard | incrediblegad.in */

.dashboard {
  border: 1px solid #e4e3e1;
  width: 100%;
  margin: auto;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

.info {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.dashboard input {
  width: 100%;
  max-width: 300px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #e4e3e1;
  border-radius: 4px;
  color: #475569;
}

.editable {
  border: 1px solid #6366f1;
}

.db-button {
  background-color: #6366f1;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 6px;
}

.db-button:hover {
  background-color: #9b6dcf;
}

.hidden {
  display: none;
}

</style>
<div class="dashboard">

  <!-- User Profile Section -->
  <img id="profileImage" class="profile-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAyMVtogcMd6C_vU1I9V28yQWCbAAODN2ERHfTKC7pellq1sMOAh07DQLlNTX7tGB3ybxTm9cYJArmntb10wKHvddL0sl9pRg-NcZ7FyqvZashQgQHdJ76wTaRYKcVNTv2gyALAoQGv-Q8e52dqagYCJ2_rYnCqJACFJX4pxjQQfeWKmPRZ2t0-tL0xOWt/s1600/1000001495.png" alt="Profile Image">

  <!-- User Info -->
  <div class="info">
    <label>First Name:</label>
    <input type="text" id="firstName" class="editable-field" disabled>
  </div>

  <div class="info">
    <label>Last Name:</label>
    <input type="text" id="lastName" class="editable-field" disabled>
  </div>

  <div class="info">
    <label>User ID:</label>
    <input type="text" id="userId" disabled>
  </div>

  <div class="info">
    <label>Email:</label>
    <input type="text" id="email" disabled>
  </div>

  <button class="db-button" id="editProfile">Edit</button>
  <button class="db-button hidden" id="saveProfile">Save Changes</button>
  <button class="db-button" onclick="window.location.href='/p/bookmark.html';" target="_blank">Bookmarks</button>

  <!-- Action Buttons -->
  <button class="db-button" id="resetPassword">Reset Password</button>
  <button class="db-button" id="logout">Logout</button>

</div>

<!-- Dashboard JS -->
<script>
  const userIdField = document.getElementById("userId"),
    emailField = document.getElementById("email"),
    firstNameField = document.getElementById("firstName"),
    lastNameField = document.getElementById("lastName"),
    profileImage = document.getElementById("profileImage"),
    editProfileButton = document.getElementById("editProfile"),
    saveProfileButton = document.getElementById("saveProfile"),
    resetPasswordButton = document.getElementById("resetPassword"),
    logoutButton = document.getElementById("logout");

  auth.onAuthStateChanged(async e => {
    if (e) {
      if (!e.emailVerified) {
        alert("Please verify your email before proceeding.");
        window.location.href = "/";
        return;
      }
      try {
        userIdField.value = e.uid;
        emailField.value = e.email;
        const t = db.collection("users").doc(e.uid);
        const a = await t.get();
        if (a.exists) {
          const t = a.data();
          firstNameField.value = t.firstName || "";
          lastNameField.value = t.lastName || "";
        } else if (e.displayName) {
          const [t, a] = e.displayName.split(" ");
          firstNameField.value = t || "";
          lastNameField.value = a || "";
        }
        e.photoURL && (profileImage.src = e.photoURL);
      } catch (t) {
        console.error("Error fetching user data: ", t);
        alert("An error occurred while fetching your data. Please try again later.");
      }
    } else {
      window.location.href = "login.html";
    }
  });

  editProfileButton.addEventListener("click", () => {
    firstNameField.disabled = lastNameField.disabled = false;
    firstNameField.classList.add("editable");
    lastNameField.classList.add("editable");
    saveProfileButton.classList.remove("hidden");
  });

  saveProfileButton.addEventListener("click", async () => {
    const e = firstNameField.value.trim(),
          t = lastNameField.value.trim();
    if (!e || !t) {
      alert("Please fill out both first name and last name.");
      return;
    }
    const a = `${e} ${t}`,
          i = auth.currentUser;
    if (i) {
      try {
        await i.updateProfile({ displayName: a });
        await db.collection("users").doc(i.uid).set({ firstName: e, lastName: t }, { merge: true });
        alert("Profile updated successfully!");
        firstNameField.disabled = lastNameField.disabled = true;
        firstNameField.classList.remove("editable");
        lastNameField.classList.remove("editable");
        saveProfileButton.classList.add("hidden");
      } catch (e) {
        console.error("Error updating profile: ", e);
        alert("Error updating profile. Please try again.");
      }
    }
  });

  resetPasswordButton.addEventListener("click", () => {
    const e = emailField.value;
    if (e) {
      auth.sendPasswordResetEmail(e).then(() => {
        alert("Password reset email sent. Please check your inbox.");
      }).catch(e => {
        console.error("Error sending reset email:", e);
        alert("Error: " + e.message);
      });
    } else {
      alert("Please enter your email first.");
    }
  });

  logoutButton.addEventListener("click", () => {
    auth.signOut().then(() => {
      alert("Logged out successfully!");
      window.location.href = "/p/login.html";
    }).catch(e => {
      console.error("Error logging out: ", e);
    });
  });
</script>

Adding User Profile icon

Go to Edit HTML then paste the following code anywhere inside the header where it fits perfectly on your Blogger theme.

<a aria-label='Login' class='login-toggle' href='/p/login.html' id='loginLink'>
  <b:tag aria-label='Login' class='login-toggle' name='button'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in">
  <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
  <polyline points="10 17 15 12 10 7"></polyline>
  <line x1="15" y1="12" x2="3" y2="12"></line>
</svg>
  </b:tag>
</a>

<a aria-label='dashboard' class='dashboard-toggle' href='/p/dashboard.html' id='dashboardLink' style='display: none;'>
  <b:tag aria-label='dashboard' class='dashboard-toggle' name='button'>
    <img 
      alt='Profile Image' 
      class='profile-img' 
      id='userProfileImage' 
      src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAyMVtogcMd6C_vU1I9V28yQWCbAAODN2ERHfTKC7pellq1sMOAh07DQLlNTX7tGB3ybxTm9cYJArmntb10wKHvddL0sl9pRg-NcZ7FyqvZashQgQHdJ76wTaRYKcVNTv2gyALAoQGv-Q8e52dqagYCJ2_rYnCqJACFJX4pxjQQfeWKmPRZ2t0-tL0xOWt/s1600-rw/1000001495.png'/>
  </b:tag>
</a>

Don't forget to replace "/p/dashboard.html" and "/p/login.html" with your website's dashboard and login page URL path.

Conclusion

Adding a login feature to your Blogger website using Firebase improve user experiance. This login feature allows to add exclusive content feature, bookmark feature and many more amazing features which are only accessible by logged users. We will discuss about these features in the next upcoming posts.

We recommend you to minify JS and CSS using any minifying website like minifier.org. Minifying JS and CSS will help you to reduce page size and help you to improve website performance. Minifying websites help you to automate this process and make it easier.

By Following this tutorial carefully, you can ensures secure and efficient login system in your Blogger website. If you have any doubt related to this post then please feel free to comment down below. Don't forget to share with your friends who are looking for a free tutorial to add a login system to their Blogger website easily.

Thanks for spending time to read this article. Have a wonderful day!