I. GIỚI THIỆU
Chào mọi người hôm nay ANewTips xin Share đến các bạn cách tạo tính năng đăng nhập trên Blogspot, ANewTips dùng CSS, HTML và Javascript để làm trang trong đẹp mắt và hiện đại hơn.
Tiện ích này giúp Trang hoặc Bài viết của bạn ở chế độ riêng tư, hoặc một số người nhất định có thể truy cập vào thì bài viết này rất hữu ích các bạn nhá.
Lưu ý: Đây chỉ là tính năng thao tác hiển thị và không hề có cơ sở dữ liệu.
Nếu bạn muốn thử Demo Live ( Tài khoản: anewtips / mật khẩu: 123456 )
PreviewII. CÁCH TẠO TÍNH NĂNG ĐĂNG NHẬP TRÊN BLOGSPOT
Các bạn truy cập vào trang quản trị Blogspot của bạn rồi nhấp vào Chủ đề - Tùy chỉnh - Chỉnh sửa HTML. Sau đó các bạn Copy đoạn Code bên dưới và đặt trước thẻ ]]> </ b: skin
/* login by anewtips */
.anewtipsloginwrap{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%}}
.anewtipsloginwrap.hidden{display: none}
#anewtipslogin{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}
.anewtipsjudul{font-size:25px;font-weight: bold;}
#anewtipslogin input[type="text"],#anewtipslogin 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;}
#anewtipslogin input[type="text"]:focus,#anewtipslogin 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.anewtips{width:24px;height::24px;fill:#fff}
@media screen and (max-width:480px){#anewtips
login{width:350px}}Sau đó đặt đoạn Code Javascript trước thẻ </body> hoặc & lt;! - </body> - & gt; & lt; / body & gt;
<script>
//<![CDATA[
// login fitur by anewtips
var users = [{ username: 'ANewTips', 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('.anewtipsloginwrap').classList.add('hidden');break}else{document.getElementById('akses').innerHTML = 'Tên hoặc Mật khẩu 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>Phần đánh dấu bạn thay bằng tên và mật khẩu của bạn. Để tránh người khác có thể nhìn thấy tài khoản và mật khẩu bạn có thể mã hóa đoạn Code bằng cách dùng Javascript Obfuscator hoặc các công cụ khác tương tự .
Tips New: Thêm tính năng đăng nhập nhiều người dùng. Bạn thay đoạn Code Javascript trên thành đoạn Code bên dưới.
<script>
//<![CDATA[
// multi login fitur by anewtips
var users = [
{ username: 'ANewTips', password: '123456' },
{ username: 'ANewTips2', password: 'anewtips123' },
{ username: 'ANewTips3', password: 'anewtips333'}
];
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('.anewtipsloginwrap').classList.add('hidden');break}else{document.getElementById('akses').innerHTML = 'Tên hoặc Mật khẩu 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>Lưu lại phần chỉnh sửa HTML trên. Tiếp theo bạn vào Trang rồi tạo một Trang mới hoặc vào Bài viết muốn đặt tính năng đăng nhập rồi thêm đoạn Code này vào.
<dv class="anewtipsloginwrap">
<div id='anewtipslogin'>
<div class='anewtipsjudul'>Login</div>
<input id='username' type='text' placeholder='Username'/><br/>
<input id='password' type='password' placeholder='Password'/>
<svg class="anewtips 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="anewtips 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>Lưu lại và xem thành quả thôi mọi người.
III. LỜI KẾT
Vừa rồi ANewTips đã Share đến các bạn cách tạo trang đăng nhập trên Blogspot rất mong được sự ủng hộ và góp ý từ mọi người.