Customer relationship management (CRM) software has come a long way in the 15 or so years since I started using it. Today’s CRMs are incredibly versatile, and because of strong competition, have remained a relatively...
Tạo tính năng đăng nhập tên người dùng + mật khẩu trên blogger
Mở đầu
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.
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
Related Posts
Hướng Dẫn Mod Full Skin Liên Quân Hot Pick Mới Nhất Sau Cập Nhật 11/11
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Hướng dẫn mod skin airi bích hải và raz muay thái mới nhất
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Hướng dẫn mod full skin liên quân new sau cập nhật mới nhất
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Mod Skin Raz Muay Thái Sau Cập Nhật + Fix Lỗi iOS + Android | Hz Mod
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Hướng dẫn mod skin raz muay thái mới nhất new
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Mod Camera Siêu Xa Liên Quân Mùa 20 iOS + Android | Hz Mod
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Mod Full Skin Hot Pick Liên Quân v5 iOS + Android | Hz Mod
05:06 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Hướng dẫn mod 40 skin new sắp ra mắt trong liên quân
05:06 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Recent Posts
- Top 10 best HR management software 2023
- Top 5 best production management software for businesses 2023
- What is CRM? CRM software benefits, processes and features
- What is customer insight? How to identify customer insights
- Sales Process on CRM: Sales Process Management Solution
- What is Sales Automation (SFA)? Is SFA software effective?
- CRM system: How to build and potential
- What is a CRM solution? Comprehensive CRM solution for businesses
- 5 Best Criminal Attorneys in Phoenix
- How to choose top law firms in Gold Coast, Australia
- 5 reasons you might lose your car accident lawsuit: Learn what to do
- The importance of hiring an experienced personal injury law firm
- 5 situations that call for hiring a commercial litigation lawyer
- Hiring a car accident lawyer: A complete guide
- Tips on hiring and working with lawyers
Nguyễn Đức Hoàng
Chất lượng quá :3
Tống Xuân Trung
cảm ơn em nhiều nè :3
Nguyễn Đức Hoàng
tym tym <3 <3
Lê Anh Đức
vip bro luông
Tống Xuân Trung
ngầu luông a :3
Jubayer Ahmed
Op brother.. Can I write about this topic in my website?
I also give you credit in my post…
Tống Xuân Trung
You can, by including a source link to this blog
Phạm Văn Linh
nhìn hay phết nhờ
Nguyễn Quang Linh
chất quá
Tống Xuân Trung
hay thật a ơi :3
Tống Xuân Trung
chất sao bằng bro được :3
Jubayer Ahmed
Your code not working…. i use different themes but same problem
Tống Xuân Trung
it works sir
Anonymous
anh ơi em không muốn dùng chống ctrl U và cấm click chuột phải. có cách nào mã hóa thẻ script và dán lại trong html không ạ. người ta xem nguồn trang vẫn thấy