Cara Membuat Fitur Login Password di Blogger

saya bagikan di sini tidak hanya menggnakan javascript, melainkan menggunakan html + css supaya tampilannya terkesan profesional dan modern
Cara Membuat Fitur Login Password di Blogger

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

Fitur ini sangat membantu bagi kalian yang memiliki halaman atau artikel yang diperuntukan bagi user tertentu dan bersifat private.

Kali ini tutorial yang akan saya bagikan hanya fitur login berupa password tanpa username.

Jadi jika ada yang ingin menggunakan fitur lengkap username + password dan multi user login, bisa cek postingan ini membuat fitur login username + password di blogger.

Sebenarnya tutorial macam ini sudah banyak sekali yang membagikan, tetapi kebanyakan hanya menggunakan javascript dengan memanfaatkan promp dan alert javascript yang sederhana.

Tetapi yang akan saya bagikan di sini tidak hanya menggunakan javascript, melainkan menggunakan html + css supaya tampilannya terkesan profesional dan modern.

Tentang cara membuat manipulasi login ini adalah saya membuat overlay pop up yang akan menutupi halaman atau artikel yang diberi sandi. Jadi sederhananya jika kita memasukan password dengan benar maka pop up overlay tersebut akan hilang dan halaman atau artikel dapat terlihat.

Begitu juga sebaliknya jika kita memasukan password yang salah maka overlay akan terus menutupi isi artikel dan akan memunculkana pesan alert (Password Yang Anda Masukan Salah!) dan pop up overlay tersebut tidak bisa ditutup secara paksa.

Oke, buat kalian yang ingin mencobanya silahkan ikuti langkah-langkah di bawah inni dengan cermat

Jika kalian ingin melihat demonya terlebih dahulu silahkan isikan password : siapngoding1 pada laman demo.


Tutorial Pembuatan Fitur Login Password

silakan masuk ke blogger pilih tema > edit html , kemudian salin kode css di bawah ini dan letakkan tepat di atas kode ]]></b:skin>

/* login fitur by siapngoding */
.siapngodingloginwrap{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7cWpS8g6TZpJ4so8ijV02hoMJEA-do5GXdZMWsxlhoT5ElYhJFI237jcOyrp18aCYxcurnZOB_XNChJEhu-48OZX0oAkbExAhtaHnfTkt6ikDcZ52OPgJ4RwK7W4bfHk_wD61mahlEhHZHpcoxX34VTFVR1x7kMP8RxZqnDu6Mp2F5DN5ddY5MckM/s1440/Hexagon.png');background-size: cover;background-position: center;width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;}
.siapngodingloginform{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}
.siapngodingjudul{margin:0;padding:30px;font-size:48px;font-weight:600}
.siapngodingloginform input[type="text"],.siapngodingloginform 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}
.siapngodingloginform input[type="text"]:focus,.siapngodingloginform input[type="password"]:focus{border: 2px solid #f09800;}
.siapngodingloginform 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}
.siapngodingloginform input[type="submit"]:hover{border:0;color:#f09800;box-shadow:3px 3px 8px #f09800}
.siapngodingloginform svg{position:absolute;margin:35px 0 0 -35px}
svg.siapngoding{width:24px;height::24px;fill:currentColor}
.hidden{display:none}

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

<script>
//<![CDATA[
//login fitur by siapngoding
 function verify(){if (document.querySelector('#password').value === 'siapngoding1'){document.querySelector('.siapngodingloginwrap').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 siapngoding1 silakan di ganti dengan password kalian, agar password tidak terlihat orang lain melalui source code kalian bisa encode javascript tersebut menggunakan Tools Javascript Obfuscator atau tools sejenisnya. jika sudah jangan lupa untuk klik simpan

Cara Penerapan Fitur Login Password Pada Postingan

Untuk penerapannya silahkan kalian salin kode di bawah ini pada akhir postingan kalian yang akan diberi password. Masukan kode ini pada Mode HTML postingan blogger kalian.

<div class="siapngodingloginwrap">
    <div class="siapngodingloginform">
    <div class="siapngodingjudul">LOGIN</div>
    <input type="password" placeholder="password" id="password" />
    <svg class="siapngoding 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>

Penutup

Demikan untuk Cara Membuat Fitur Login Password Di Blogger. Jika ada pertanyaan silahkan ajukan melalui kolom komentar dan terimakasih telah berkunjung.

Referensi:
https://www.wendycode.com/2021/04/membuat-fitur-login-password-di-blogger.html

Cara Membuat Fitur Login Password di Blogger
Blog ini dibuat dengan tujuan untuk berbagi kepada semua orang yang membutuhkannya.

You May Like These

Ikuti blog Siap Ngoding untuk mendapatkan notifikasi terbaru!