If you run a blog on Blogger.com and want to hide a specific post from the public—allowing access only to selected users—then this is the perfect Blogger add-on for you. This feature lets you lock any post using a username and password, ensuring only authorized readers can view the content.
Blogger Login Interface
The Blogger login interface works similarly to the Password-Protected Download Button explained earlier. When a visitor opens the protected post, they will see a login form asking for a username and password.
Once the user enters the correct credentials and clicks the login button, the script checks the entered data against the stored values inside the JavaScript code. If the information is incorrect, an Error message appears. If the details match, the login form automatically hides and access is granted.
The script uses the browser’s localStorage API to securely store login status, username, and password—ensuring the visitor remains logged in until storage is cleared.
How to Install the Login Interface
Before adding the code, you will need to edit the username and password inside the script. You can also customize the design to match your Blogger theme, especially if you are not using Plus UI Template.
To install this login interface into any Blogger post, follow these steps:
- Go to the main Blogger dashboard.
- Select the post you want to protect.
- Switch to the HTML editor tab.
- Scroll to the bottom and paste the following code.
<div class="lgn">
<div id="lgnid">
<div class="lgnttl">Login</div>
<input id="username" type="text" placeholder="Username"/><br />
<input id="password" type="password" placeholder="Password" />
<br />
<center><button class="login" onclick="startlog()">Login</button></center>
<p id="access"></p>
</div>
</div>
<style type="text/css">
/* Login CSS */.lgn{width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;background:flat;background-color:#f3f5fe;background-size:400% 400%;animation:gradient 10s ease infinite}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.lgn.hidden{display:none}#lgnid{position:absolute;border-radius:8px;width:400px;padding:30px;display:block;transform:translate(-50%,-50%);top:50%;left:50%;background:flat;background-color:#fff;transition:all .5s ease;border-radius:20px}.lgnttl{font-size:25px;font-weight:700;text-align:center}#lgnid input[type=text],#lgnid input[type=password]{padding:10px;border-radius:40px;margin:10px 0;width:95%;border:1px solid rgba(255,255,255,.2);background:#d3d3d3}#username::-webkit-input-placeholder,#password::-webkit-input-placeholder{color:#000}#lgnid input[type=text]:focus,#lgnid input[type=password]:focus{outline:none}button.login{color:#fff;padding:10px;border-radius:40px;border:none;outline:none;background:#9c27b0;transition:1.5s}
button.login:hover{background-color:red;transition:.5s}@media screen and (max-width:480px){#lgnid{width:350px}}.red{color:red}
</style>
<script>
var storeS = localStorage.getItem("users");
if (null == storeS) {
var users = [
{ username: "Medo", password: "12345" },
{ username: "username_here", password: "password_here" },
];
localStorage.setItem("users", JSON.stringify(users));
}
function getUserUsername(e) {
return JSON.parse(localStorage.getItem("users")).filter((t) => t.username === e);
}
function ceklog() {
var e = localStorage.getItem("login");
null != e && "true" == e && document.querySelector(".lgn").classList.add("hidden");
}
function startlog() {
var e = document.querySelector("#username").value,
t = document.querySelector("#password").value;
getUserUsername(e.trim()).length > 0
? getUserUsername(e.trim())[0].password == t.trim()
? (document.querySelector(".lgn").classList.add("hidden"), localStorage.setItem("login", "true"))
: (document.querySelector("access").innerHTML = "<p class='red'>Wrong username or password!</p>")
: (document.querySelector("access").innerHTML = "<p class='red'>User not found!</p>");
}
ceklog();
const show = () => {
var e = document.querySelector("#password"),
t = document.querySelector(".icon1"),
r = document.querySelector(".icon2");
"password" === e.type ? ((e.type = "text"), (r.style.opacity = "1"), (t.style.opacity = "0")) : ((e.type = "password"), (r.style.opacity = "0"), (t.style.opacity = "1"));
};
</script>Note:
Remember to inform your visitors about the username and password you configured in the script, especially if you want to give them access to protected posts.
Done!
This completes our tutorial on
“How to Hide or Lock a Blogger Post with Username & Password.”
See you again in a new tutorial—stay safe! 🙂
