Mở đầu
Bạn đang sử dụng blogger nhưng nó là công khai, bây giờ bạn muốn nó có quyền riêng tư bằng cách người dùng truy cập vào bắt buộc phải đăng nhập. Hôm nay mình sẽ hướng dẫn các bạn tạo 1 form đăng nhập đơn giản hơn nữa là thủ thuật mà mình sẽ chia sẻ lần này mình có thể thêm nhiều tài khoản thay vì 1 tài khoản để đăng nhập
Nếu bạn có các trang hoặc bài viết ở chế độ riêng tư, hoặc chỉ được phép truy cập cho một số người dùng nhất định, thì cách tạo tính năng đăng nhập tên người dùng + mật khẩu trên blogger / blogspot này sẽ hữu ích.
Lưu ý: Đây chỉ là một thao tác, không phải là 1 tính năng đăng nhập
Bạn có thể xem demo dưới đây
Tên người dùng : xuantrung
Mật khẩu : 123456
Hướng dẫn
Bước 1:
Vào blog chọn chủ đề chỉnh sửa HTML tìm thẻ ]]> </ b: skin> và dán CSS sau trên đầu nó
/* login fitur by xuan trung blog */
.wendyloginwrap{width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;background:linear-gradient(-45deg,#23a6d5,#23d5ab,#f09800,#e6af19);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%}}
.wendyloginwrap.hidden{display: none}
#wendylogin{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}
.wendyjudul{font-size:25px;font-weight: bold;}
#wendylogin input[type="text"],#wendylogin 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;}
#wendylogin input[type="text"]:focus,#wendylogin 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.wendy{width:24px;height::24px;fill:#fff}
@media screen and (max-width:480px){#wendylogin{width:350px}} Bước 2:
Dán đoạn javascript sau lên trên đầu thẻ đóng</body> hoặc & lt;! - </body> - & gt; & lt; / body & gt;
<script>
//<![CDATA[
// login fitur by xuan trung blog
var users = [{ username: 'xuantrung', 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('.wendyloginwrap').classList.add('hidden');break}else{document.getElementById('akses').innerHTML = 'username atau password salah!'}}}
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>Phần mà mình đánh dấu xuantrung và 123456 vui lòng thay thế nó thành tên mà bạn muốn sử dụng cho tên người dùng và mật khẩu, để tên người dùng và mật khẩu thì bạn nên mã hóa nó
Cách sử dụng
Đặt html bên dưới vào trang tĩnh hoặc trang bài đăng mà bạn muốn đặt nó là riêng tư
<dv class="wendyloginwrap">
<div id='wendylogin'>
<div class='wendyjudul'>Login</div>
<input id='username' type='text' placeholder='Username'/><br/>
<input id='password' type='password' placeholder='Password'/>
<svg class="wendy 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="wendy 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()'>Login</button>
<p id='akses'></p>
</div>
</dv>Tạo nhiều người dùng
Để tạo nhiều người dùng có thể sử dụng javascript bên dưới thay thế
<script>
//<![CDATA[
// multi login fitur by wendy code
var users = [
{ username: 'xuantrung', password: '123456' },
{ username: 'xuantrung2', password: 'xuantrung123' },
{ username: 'xuantrung3', password: 'xuantrung333'}
];
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('.wendyloginwrap').classList.add('hidden');break}else{document.getElementById('akses').innerHTML = 'username atau password salah!'}}}
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>Lời kết
Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha