Tạo mật khẩu và tên đăng nhập cho trang - bài viết Blogspot - Chủ đề này mình đã có hai bài chia sẻ với các bạn trước đây. Đó là:
1. Đặt mật khẩu cho bài viết Blogspot
2. Tạo mật khẩu đăng nhập cho trang - bài viết Blogspot
Hai bài với hai thủ thuật và cách hoạt động khác nhau (mình có giải thích điểm khác nhau ở bài thứ 2: Tạo mật khẩu đăng nhập cho trang - bài viết Blogspot để tùy theo nhu cầu mà các bạn có thể lựa chọn.)
Bài viết hôm nay mình chia sẻ có thể nói nó là sự cải tiến của bài thứ 2. Tức nó hoàn toàn giống từ cách hoạt động cũng như các bước thực hiện. Nó chỉ thay đổi chút đỉnh và thêm phần Tên đăng nhập. Các bạn xem qua DEMO để thấy thay đổi ra sao nhé.
- Tên đăng nhập: ntlruby.com
- Mật khẩu: 123456
Tạo mật khẩu và tên đă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{width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;background:linear-gradient(-45deg,#23a6d5,#23d5ab,#2071ee,#4d90fe);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%}}
.ntlrubyloginwrap.hidden{display: none}
#ntlrubylogin{position:absolute;border-radius:8px;width:400px;padding:30px;display:block;transform:translate(-50%,-50%);top:50%;left:50%;background:rgba(255,255,255,0.1);backdrop-filter:blur(5px);border-radius:10px;box-shadow:0
25px 45px rgba(0,0,0,0.2);color:#fff}
.ntlrubyjudul{font-size:30px;font-weight: bold;}
#ntlrubylogin input[type="text"],#ntlrubylogin
input[type="password"]{padding:10px;border-radius:5px;margin:10px
0;width:95%;border:1px solid
rgba(255,255,255,0.2);background:rgba(255,255,255,0.2);color:#fff}
#username::-webkit-input-placeholder,#password::-webkit-input-placeholder{color:#fff;}
#ntlrubylogin input[type="text"]:focus,#ntlrubylogin
input[type="password"]:focus{outline:none}
button.login{color:#000;font-weight:bold;padding:10px;border-radius:5px;border:none;outline:none;border:
1px solid rgba(255, 255, 255, 0.2);background:#fff;transition: 1.5s}
button.login:hover{background: rgba(255, 255, 255,
0.2);color:#fff;transition: .5s}
.icon1{position:absolute;margin-top:20px;right:55px;z-index:
1}
.icon2{position:absolute;margin-top:20px;right:55px;opacity:
0}
svg.ntlruby{width:24px;height::24px;fill:#fff}
Bước 2: Thêm javascript và thiết lập mật khẩu
</body> sau đó copy và dán đoạn javascript dưới đây vào trước nó.<script>
//<![CDATA[
// ntlrubyloginJS
var users = [{ username: 'ntlruby.com', password: '123456'
}];
function startlog(){var username =
document.getElementById('username').value;var password = document.getElementById('password').value;for
(var i = 0;i < users.length;i++){if(username == users[i].username &&
password ==
users[i].password){document.querySelector('.ntlrubyloginwrap').classList.add('hidden');break}else{document.getElementById('akses').innerHTML
= 'Mật khẩu hoặc tên dăng nhập không đúng!'}}}
const show = () =>{var password =
document.querySelector('#password');var sandi =
document.querySelector('.icon1');var sandidua =
document.querySelector('.icon2');if (password.type ===
'password'){password.type = 'text';sandidua.style.opacity =
'1';sandi.style.opacity = '0';}else{password.type =
'password';sandidua.style.opacity = '0';sandi.style.opacity = '1';}};
//]]>
Bước 3: Đặt form đăng nhập vào trang tĩnh hoặc bài viết
<dv class="ntlrubyloginwrap">
<div id='ntlrubylogin'>
<div
class='ntlrubyjudul'>Vui Lòng Đăng Nhập!</div>
<input
id='username' type='text' placeholder='Tên đăng nhập'/><br/>
<input
id='password' type='password' placeholder='Mật khẩu'/>
<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>
<svg
class="ntlruby icon2" viewBox="0 0 24 24">
<path
d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9
11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0
12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5
0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10
1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2
16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64
16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61
17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7
12,7Z" />
</svg>
<br/>
<button
class='login' onclick='startlog()'>ĐĂNG NHẬP</button>
<p
id='akses'></p>
</div>
***Ngoài ra nếu các bạn muốn thiết lập nhiều Username và nhiều Password thì thay đoạn javascript trước thẻ
</body> (bước 2) thành đoạn javascript dưới đây <script>
//<![CDATA[
// ntlrubyloginJS
var users = [
{ username:
'ntlruby.com', password: '123456' },
{ username:
'www.ntlrub.com', password: 'ntlruby123' },
{ username:
'ntlrubyblog', password: 'ntlrubyblog123'}
];
function startlog(){var username =
document.getElementById('username').value;var password =
document.getElementById('password').value;for (var i = 0;i <
users.length;i++){if(username == users[i].username && password ==
users[i].password){document.querySelector('.ntlrubyloginwrap').classList.add('hidden');break}else{document.getElementById('akses').innerHTML
= 'Mật khẩu hoặc tên đăng nhập không đúng!'}}}
const show = () =>{var password =
document.querySelector('#password');var sandi =
document.querySelector('.icon1');var sandidua = document.querySelector('.icon2');if
(password.type === 'password'){password.type = 'text';sandidua.style.opacity =
'1';sandi.style.opacity = '0';}else{password.type =
'password';sandidua.style.opacity = '0';sandi.style.opacity = '1';}};
//]]>
***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.
Facebook