silahkan buka blogger > themes > edit html copy css di bawah ini dan paste di atas kode tersebut]]></b:skin>atau di atas kode</style>
/* login fitur by wendy code */
.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}}selanjutnya silahkan copy javascript di bawah ini dan letakkan di atas kode tersebut</body>atau<!--</body>--></body>
<script>
//<![CDATA[
// multi login fitur post by www.wendycode.com
// last update 20-04-2022 + localStroge
var storeS = localStorage.getItem("users");
if(storeS==null){
var users = [
{ username: "wendycode", password: "123456" }];
localStorage.setItem("users",JSON.stringify(users));
}
function getUserUsername(username) {
return JSON.parse(localStorage.getItem('users')).filter(users => users.username === username)
}
function ceklog(){
var login = localStorage.getItem("login");
if(login!=null && login=="true"){
document.querySelector(".wendyloginwrap").classList.add("hidden");
}
}
ceklog();
function startlog(){
var username= document.querySelector("#username").value;
var password= document.querySelector("#password").value;
if(getUserUsername(username.trim()).length>0){
var user = getUserUsername(username.trim())[0];
if(user.password == password.trim()){
document.querySelector(".wendyloginwrap").classList.add("hidden");
localStorage.setItem("login","true");
}else{
document.querySelector("#akses").innerHTML = "username atau password salah!";
}
}else{
document.querySelector("#akses").innerHTML = "user tidak terdaftar";
}
}
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>bagian yang saya tandai wendycode dan 123456 silahkan ganti dengan username dan password anda, agar username password tidak terlihat orang lain, anda bisa encode javascriptnya menggunakan Javascript Obfuscator atau tools sejenis. Jika sudah, jangan lupa klik Simpan
cara pakai taruh html dibawah ini pada halaman statis atau halaman postingan yang ingin di beri password.
<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>Membuat Fitur Login dengan Multi User
jika sudah, jangan lupa klik update ya, demikianlah cara membuat username + password login di blogger/blogspot, semoga bermanfaat dan terima kasih atas kunjungannya.
<script>
//<![CDATA[
// multi login fitur post by www.wendycode.com
// last update 20-04-2022 + localStroge
var storeS = localStorage.getItem("users");
if(storeS==null){
var users = [
{ username: "wendycode", password: "123456" },
{ username: "wendyaja", password: "wendy123" },
{ username: "wendylagi", password: "wendylagi333"}
];
localStorage.setItem("users",JSON.stringify(users));
}
function getUserUsername(username) {
return JSON.parse(localStorage.getItem('users')).filter(users => users.username === username)
}
function ceklog(){
var login = localStorage.getItem("login");
if(login!=null && login=="true"){
document.querySelector(".wendyloginwrap").classList.add("hidden");
}
}
ceklog();
function startlog(){
var username= document.querySelector("#username").value;
var password= document.querySelector("#password").value;
if(getUserUsername(username.trim()).length>0){
var user = getUserUsername(username.trim())[0];
if(user.password == password.trim()){
document.querySelector(".wendyloginwrap").classList.add("hidden");
localStorage.setItem("login","true");
}else{
document.querySelector("#akses").innerHTML = "username atau password salah!";
}
}else{
document.querySelector("#akses").innerHTML = "user tidak terdaftar";
}
}
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>jika ingin menambahkan user baru, tambahkan yang di atas harus diakhiri dengan koma ,
{ username: 'usernamekalian', password: 'passwordkalian' }jika sudah, jangan lupa klik update ya, demikianlah cara membuat username + password login di blogger/blogspot, semoga bermanfaat dan terima kasih atas kunjungannya.
Baca juga :
MAU BELAJAR DIGITAL MARKETING
Pengalaman Kami memiliki pengalaman bertahun-tahun, dan menghasilkan ratusan video..
Kualitas tinggi Beberapa desain video kami telah menghasilkan puluhan rupiah.
Cepat Anda tidak perlu menunggu lama, Karena sudah ada jadwal pelatihan.
Fasilitas Template Tidak hanya mendesain video, kami juga Memberikan template Anda.
