How to create Password Protected blogger, wordpress and other websites post using css and javascript. How to publish password protected post on blogger, wordpress and other websites in css and javascript.

Why Create a Password Protected Post?

Before we dive into the technical details, it’s important to understand why you might want to password protect a post or page on your website. There are several reasons:

• Confidential Content:

If you have posts with sensitive information that should only be seen by specific users.

• Exclusive Content for Subscribers:

Maybe you want to offer premium content to your newsletter subscribers or members of a community.

• Private Projects or Portfolios:

You might have a personal project or portfolio you want to share only with potential clients or collaborators.

Password Protecting a Post on Blogger, wordpress and other websites

Blogger doesn’t offer a built-in password protection feature, but you can use a combination of HTML, CSS, and JavaScript to achieve this effect.

Step-by-Step Guide:

• Open Your Blogger Post:

Log in to your Blogger account and open the post you want to password-protect.

• HTML and JavaScript Code:

In the Blogger post editor, switch to HTML mode and add the following code:

  
  <style>
  body.blur-background {

    filter: blur(5px); /* Apply blur to body */

    pointer-events: none; /* Optional: Disable interactions with blurred content */

} 
</style>
  
  

<script>

function showAlert() {
let Input = prompt(" Enter your Password.");
  
if (Input == Your_Password_here) {
alert("Success!");
document.body.classList.remove("blur-background")
}
else {
window.location.href = "";
  alert("You have entered wrong Password");
document.body.classList.add("blur-background");
}
}
window.onload = function() {
            showAlert();
 
        };
</script>

Replace your Password with Your_Password_herein script file