Tạo mật khẩu đăng nhập cho trang - bài viết Blogspot

Các bạn đang sử dụng Blogger để viết Blog và có những trang hoặc bài viết cần bảo mật? Ở bài Đặt mật khẩu cho bài viết Blogspot mình đã chia sẻ thì chỉ sử dụng javascript như một cảnh báo và nhắc nhở. Bài viết lần này mình chia sẻ có sử dụng cả javascript, CSS và HTML để trông nó đẹp và chuyên nghiệp hơn. Để biết nó đẹp hơn ra sao và nó hoạt động như thế nào, 

  Tuy nhiên mình cũng nói qua điểm khác nhau để tùy nhu cầu mà các bạn lựa chọn. Đó là:

        - Bài trước có sử dụng thẻ điều kiện <b:if> để khóa bài viết theo URL. Vì vậy các bạn có thể đặt password cho bài viết theo chủ đề. Chẳng hạn các bạn cho tất cả những bài viết cần khóa vào một nhãn (lable) sau đó đặt password cho Link nhãn đó. Theo đó các bạn có thể khóa bất kỳ Tab nào trên menu của mình. Chính vì sử dụng thẻ điều kiện <b:if> nên các bạn hoàn toàn có thể đặt cho mỗi URL một mật khẩu khác nhau.

         - Bài này không sử dụng thẻ điều kiện <b:if> mà muốn khóa bài viết nào thì đặt trực tiếp code HTML vào bài viết đó. Vì vậy các bạn không thể đặt password cho nhãn (lable). Các bạn thiết lập mật khẩu mặc định và sử dụng cho tất cả trang hoặc bài viết.

Tạo mật khẩu đăng nhập cho trang - bài viết Blogspot

   Bước 1: Thêm CSS

Các bạn truy cập vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML. sau đó copy và dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

/*SonblogloginCSS*/

.sonblogloginwrap{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_btYU0mmmDnoDPEViVJgaGa3aN3ulFBbWyvTYvNpP_EcL3-PArdpVVadQEYBSj7OOcJhD2jmKTOzsdEoRWQGAbxoff9KubHTUHw6VPJQlXhbg4AsKhjURfAzxDBBysaUItwlZLIpItsaE/s320/background.png?size=626&ext=jpg');background-size: cover;background-position: center;width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;}

.sonblogloginform{width:400px;padding:30px;background:rgba(0,132,255);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;text-align:center;border-radius:20px;font-size:16px;box-shadow:3px 3px 8px #16537e}

.sonblogjudul{margin:0;font-size:35px;font-weight:600}

.sonblogloginform input[type="text"],.sonblogloginform input[type="password"]{background:none;border:1px solid white;outline:none;border-radius:20px;color:white;padding:5px;margin:30px auto;text-align:center;width:170px}

.sonblogloginform input[type="text"]:focus,.sonblogloginform input[type="password"]:focus{border: 2px solid #16537E;}

.sonblogloginform input[type="submit"]{padding:3px 20px;background:rgba(0,0,0,0.5);border:1px solid white;border-radius:5px;outline:none;color:white;width:170px}

.sonblogloginform input[type="submit"]:hover{border:0;color:#0084ff;box-shadow:3px 3px 8px #16537e}

.sonblogloginform svg{position:absolute;margin:35px 0 0 -35px}

svg.sonblog{width:24px;height::24px;fill:currentColor}

.hidden{display:none}

Bước 2: Thêm javascript và thiết lập mật khẩu

Tiếp theo, các bạn kéo xuống thẻ </body> sau đó copy và dán đoạn javascript dưới đây vào trước nó.

<script>

//<![CDATA[

//sonblogloginJS

 function verify(){if (document.querySelector('#password').value === 'sonblog.xyz'){document.querySelector('.sonblogloginwrap').classList.add('hidden')}

else{alert('Bạn đã nhập sai mật khẩu!');password.setSelectionRange(0,password.value.length)}

return false}

  const show = () => {

  let password = document.querySelector('#password');

  let sandi = document.querySelector('.icon1');

  if (password.type === 'password') {

    password.type = 'text';

    sandi.style.color = '#16537E';

  } else {

    password.type = 'password';

    sandi.style.color = '#fff';

  }

};

//]]>

</script>

Trong đó:

        + sonblog.xyz màu đỏ là mật khẩu các bạn cần thiết lập.

        + Dòng else{alert('Bạn đã nhập sai mật khẩu!');password.setSelectionRange(0,password.value.length)} là thông báo khi nhập sai mật khẩu. Nếu các bạn muốn khi người dùng nhập sai mật khẩu không hiện thông báo mà chuyển hướng về trang chủ hay trang bất kỳ thì các bạn thay dòng đó thành else{window.location="https://www.sonblog.xyz";}. Trong đó https://www.ntlruby.com là URL trang mà các bạn muốn chuyển hướng đến.

Lưu Template lại.

Bước 3: Đặt form đăng nhập vào trang tĩnh hoặc bài viết

Các bạn vào bài viết hoặc trang tĩnh muốn đặt mật khẩu chuyển sang Chế độ xem HTML sau đó copy và dán đoạn code HTML dưới đây vào rồi lưu lại.

<div class="sonblogloginwrap">

    <div class="sonblogloginform">

    <div class="sonblogjudul">Vui Lòng Đăng Nhập!</div>

    <input type="password" placeholder="Nhập mật khẩu" id="password" />

    <svg class="sonblog icon1" viewBox="0 0 24 24" onclick="show()">

    <path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>

    <input type="submit" value="ĐĂNG NHẬP" onclick="verify()" />

</div></div>

Chúc Các Bạn Thành Công