Demo 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: 'vietnone.blogspot.com', password: 'huongdan' }]; 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 đó vietnone.blogspot.com là Tên đăng nhập (Username) và huongdan 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>

Cách tạo trang đăng nhập cho blogpsot

Nguyễn Đức Hoàng

Giờ người ta dùng kiểu này rồi bạn ơi

danganhdung123

Nguyễn Đức Hoàng cho xin code dc k ông?

ZayyHoang

danganhdung123 code ở trên nha bạn

Dicodedao-09

có phần đăng kí ko bn

Nguyễn Đức Hoàng

Dicodedao-09 mấy cái này chỉ là lớp html phủ lên thôi, f12 xóa cái là ko cần logim cũng đọc được nội dung bên trong, còn trang này thì login kiểu khác nhé, f12 xóa hay viewsource cũng ko bị lộ nội dung bên trong

ZayyHoang

Dicodedao-09 à không nha