membuat fitur login password di blogger

cara membuat fitur login password di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat fitur login password di blogger / blogspot.

jika kalian memiliki halaman maupun artikel yang bersifat private, atau hanya boleh di akses untuk user tertentu, maka cara membuat fitur login password di blogger / blogspot ini akan membantu.

sebenarnya tutorial membuat halaman password ini sudah banyak yang buat, kebanyakan hanya menggunakan javascript saja memanfaatkan prompt dan alert pada javascript.

bedanya dengan yang akan saya bagikan di sini, saya menggunakan css html dan javascript tentunya agar tampilannya lebih cantik dan terkesan moderen.

cara saya manipulasi yaitu saya membuat sebuah overlay pop up gitu yang akan menutupi semua isi konten yang ingin di berikan password, jadi ketika password di isikan dengan benar maka overlay pop up yang tadinya menutupi isi konten akan hilang, dan otomatis isi konten akan terlihat / dapat di akses.

namun sebaliknya jika password di isikan salah, maka akan memunculkan sebuah alert ( Password Yang Anda Masukan Salah! ) dan overlay pop up tidak akan hilang / isi konten tidak dapat di akses.

ok buat kalian yang ingin mencobanya mari simak caranya di bawah ini.

jika ingin mencoba demonya gunakan password : wendycode123

untuk yang ingin menggunakan username + password dan multi user login, bisa cek postingan ini membuat fitur login username + password di blogger

Premium
user login/register blogger dengan database google sheet dan loginspot - fitur login untuk blogspot

Cara Membuat Fitur Login Password Di Blogger

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* login fitur by wendy code */
.wendyloginwrap{background: url('https://img.freepik.com/free-photo/rear-view-programmer-working-all-night-long_1098-18697.jpg?size=626&ext=jpg');background-size: cover;background-position: center;width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;}
.wendyloginform{width:400px;padding:30px;background:rgba(0,0,0,0.8);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;text-align:center;border-radius:20px;font-size:16px}
.wendyjudul{margin:0;padding:30px;font-size:48px;font-weight:600}
.wendyloginform input[type="text"],.wendyloginform input[type="password"]{background:none;border:1px solid white;outline:none;border-radius:20px;color:white;padding:5px;margin:30px auto;text-align:center;width:170px}
.wendyloginform input[type="text"]:focus,.wendyloginform input[type="password"]:focus{border: 2px solid #f09800;}
.wendyloginform input[type="submit"]{padding:3px 20px;background:rgba(0,0,0,0.5);border:1px solid white;border-radius:5px;outline:none;color:white;width:170px}
.wendyloginform input[type="submit"]:hover{border:0;color:#f09800;box-shadow:3px 3px 8px #f09800}
.wendyloginform svg{position:absolute;margin:35px 0 0 -35px}
svg.wendy{width:24px;height::24px;fill:currentColor}
.hidden{display:none}

lanjut silakan salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
//login fitur by wendy code
 function verify(){if (document.querySelector('#password').value === 'wendycode123'){document.querySelector('.wendyloginwrap').classList.add('hidden')}
else{alert('Password Yang Anda Masukan Salah!');password.setSelectionRange(0,password.value.length)}
return false}
  const show = () => {
  let password = document.querySelector('#password');
  let sandi = document.querySelector('.icon1');
  if (password.type === 'password') {
    password.type = 'text';
    sandi.style.color = '#f09800';
  } else {
    password.type = 'password';
    sandi.style.color = '#fff';
  }
};
//]]> 
</script>

bagian yang saya tandai wendycode123 silakan di ganti dengan password kalian, agar password tidak terlihat orang lain kalian bisa encode javascript tersebut menggunakan Javascript Obfuscator atau tools sejenisnya. jika sudah jangan lupa untuk klik simpan

cara penggunaan letakkan html di bawah ini pada halaman statis atau halaman postingan yang ingin di beri password.

<div class="wendyloginwrap">
    <div class="wendyloginform">
    <div class="wendyjudul">LOGIN</div>
    <input type="password" placeholder="password" id="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>
    <input type="submit" value="LOGIN" onclick="verify()" />
</div></div>

jika sudah jangan lupa juga untuk klik perbarui , ok jadi sekian cara membuat fitur login password di blogger / blogspot semoga bermanfaat dan terima kasih sudah berkunjung.