Tạo mật khẩu và tên đăng nhập cho trang - bài viết Blogspot
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à:
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}
@media screen and (max-width:480px){#ntlrubylogin{width:350px}}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
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';}};
//]]>
</script>Trong đó ntlruby.com là Tên đăng nhập (Username) và 123456 là Mật khẩu (Password) các bạn cần thiết lập.
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.
<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>
</dv><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';}};
//]]>
</script>Trong đó ntlruby.com, www.ntlruby.com, ntlrubyblog và 123456, ntlruby123, ntlrubyblog123 là những Tên đăng nhập (Username) và Mật khẩu (Password) mà các bạn cần thiết lập.
***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.
Chúc các bạn thành công!
0 comments for Tạo mật khẩu và tên đăng nhập cho trang - bài viết Blogspot