How to Set Password Protection Using HTML and JavaScript in Blogger post

You can manually create password-protected content using a combination of HTML and JavaScript. Here’s how:

Steps:

1. Open the Blogger post editor.
2. Switch to the HTML view.
3. Paste the following code in the post:

<script>
function checkPassword() {
    var password = document.getElementById("password").value;
    if (password === "yourpassword") {
        document.getElementById("protected-content").style.display = "block";
        document.getElementById("password-form").style.display = "none";
    } else {
        alert("Incorrect password. Please try again.");
    }
}
</script>

<div id="password-form">
    <p>This content is password protected. Please enter the password to view it:</p>
    <input type="password" id="password" placeholder="Enter password">
    <button onclick="checkPassword()">Submit</button>
</div>

<div id="protected-content" style="display:none;">
    <h2>Protected Content</h2>
    <p>This is the protected content that will be revealed after entering the correct password.</p>
</div>

Replace "yourpassword" with the password you want to use.

DOWNLOAD SCRIPT : You can download the script file from here.

Limitations:

• Password-protecting content with JavaScript is not highly secure, as users can view the HTML source to bypass it.
• Blogger lacks advanced access control options compared to platforms like WordPress.