Home
Blogger

How to add login feature in Blogger


 Hello everyone welcome to Shiva Technic World,  you want to make a private page or blog that can access by anyone with a username and password only? then this tutorial is for you.

In this tutorial, we are going to show you how to add a login feature in Blogger!

We used here JS, CSS and HTML  for this login feature!

So without wasting much let's check how to add a login feature in Blogger!

How to add a login feature in Blogger?

  • First, go to your Blogger dashboard
  • Then go to Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Now find ]]></b:skin> and paste the following CSS just above it

/* Login feature by Shiva Technic World */.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}

  • Then Save the HTML
  • Then create a page/post or open the page/post to which you want to add the login feature
  • Then make sure you switched Compose view to HTML view
  • Then paste the following HTML code on it

    • <!--[ Login feature ]-->
    <div class="lgn">
    <div id="lgnid">
      <div class="lgnttl">Login</div>
        <input id="username" type="text" /><br />
        <input id="password" type="password" />
        <br />
      <center><button class="login" onclick="startlog()">Login</button></center>
        <p id="access"></p>
    </div>
    </div>

    You can change highlighted texts on the code box as you like!


  • Then paste the following Javascript just above it

    • <script>var storeS=localStorage.getItem("users");if(null==storeS){var users=[{username:"STW",password:"123456"},{ 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>

    Don't forget to change hilighted STW with username and 123456 with password!


    To add more users


    You can add more users by adding , and using following code
    { username: 'username_here', password: 'password_here' }

    Example


    <script>var storeS=localStorage.getItem("users");if(null==storeS){var users=[{username:"STW",password:"123456"},{ 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>

  • Then click Publish to publish the post!


    • Want to see how it looks?



    Demo login feature username and pass

    Username: Shiva E S 

     Password: 123456



    Conclusion

    Hope this How to add login feature in Blogger tutorial was useful to you, If you facing any issues or having any doubts then ask me in the comment, do share with your friend, Thanks for visiting, Have a nice day!