Hướng dẫn cài mật khẩu cho bài viết Blogger

Vui lòng nhập mật khẩu để xem nội dung

<style>
#hiddenDiv{display:none}
#passwordContainer{display:flex;flex-direction:column;align-items:center;margin-top:50px}
#passwordContainer p{font-size:15px;margin-bottom:10px;color:#333}
#passwordInput{padding:10px;border:1px solid #ccc;border-radius:5px;margin-bottom:10px;width:200px}
#passwordContainer button{padding:10px 20px;background-color:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer}
#hiddenDiv{display:none;margin-top:20px;padding:10px;border:1px solid #ccc;border-radius:5px;width:300px;background-color:#f2f2f2}
</style>

<div id='passwordContainer' style="display:none;">
  <p>Vui lòng nhập mật khẩu để xem nội dung</p>
  <input type="password" id="passwordInput" placeholder="Enter password"/>
  <button onclick="checkPassword()">Mở khóa</button>
</div>

<div id="hiddenDiv">
  Nội dung của bạn Viết trong khung này
</div>

<script>
  var myPass = '12345';

  function checkPassword() {
    var password = document.getElementById("passwordInput").value;
    if(password === myPass) {
      var storedPassword = sessionStorage.getItem("password");
      if(storedPassword === null) {
        sessionStorage.setItem("password", password);
        document.getElementById("hiddenDiv").style.display = "block";
        document.getElementById("passwordContainer").style.display = "none";
      } else if(storedPassword === password) {
        document.getElementById("hiddenDiv").style.display = "block";
        document.getElementById("passwordContainer").style.display = "none";
      } else {
        document.getElementById("passwordContainer").style.display = "block";
        document.getElementById("hiddenDiv").style.display = "none";
      }
    } else {
      alert("Sai pass rồi bé ơi!");
    }
  }
  window.onload = function() {
    var storedPassword = sessionStorage.getItem("password");
    if(storedPassword !== null) {
      document.getElementById("hiddenDiv").style.display = "block";
      document.getElementById("passwordContainer").style.display = "none";
    } else {
      document.getElementById("hiddenDiv").style.display = "none";
      document.getElementById("passwordContainer").style.display = "block";
    }
  };
</script>