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, các bạn xem qua DEMO nhé (mật khẩu đăng nhập là: ntlruby.com)

   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>

/*ntlrubyloginCSS*/

.ntlrubyloginwrap{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUh2BqDIia-UqnU03h05b-MMJC8lM57RiTCkcLoN_LS9fQJfQZ2AF6eyITBoi4GK6HLfJAc3zTI2oLupQXX6hj9J0RckKfBQBuIjOM3kouCAACWCkiaNLIRUiIZcyzvLvmklzwjSPD3QjR/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;}

.ntlrubyloginform{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}

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

.ntlrubyloginform input[type="text"],.ntlrubyloginform 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}

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

.ntlrubyloginform 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}

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

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

svg.ntlruby{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[

//ntlrubyloginJS

 function verify(){if (document.querySelector('#password').value === 'ntlruby.com'){document.querySelector('.ntlrubyloginwrap').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 đó:

        + ntlruby.com 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.ntlruby.com";}. 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="ntlrubyloginwrap">

    <div class="ntlrubyloginform">

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

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

    <svg class="ntlruby 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>

***Lưu ý: Tuy đặt mật khẩu là như thế nhưng với một số người cố tình vẫn có thể đánh cắp mật khẩu của các bạn bằng cách xem nguồn trang. Để đảm bảo mật khẩu (password) không bị đánh cắp, các bạn nên mã hóa đoạn javascript sau khi đã thay đổi theo ý của mình. Hoặc áp dụng thủ thuật chống Click chuột phải và bấm phím Ctrl + U theo bài: Ngăn chặn sao chép bài viết trên Blogspot. Như trang DEMO ở trên mình có áp dụng.

Video thị phạm code: Tạo mật khẩu đăng nhập cho trang - bài viết Blogspot

Chúc các bạn thành công!