Cara membuat fitur login password di Blogger

Cara membuat fitur login password di Blogger
Cara membuat fitur login password di Blogger

HHalo semuanya, pada kesempatan kali ini saya akan berbagi lagi cara membuat fitur login password di blogger/blogspot.

Fitur ini sangat berguna bagi mereka yang memiliki halaman atau artikel yang ditujukan untuk pengguna tertentu dan yang bersifat pribadi.

Tutorial yang akan saya bagikan kali ini hanyalah fitur login berupa password tanpa username.

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

Sebenarnya banyak tutorial seperti ini telah dibagikan tetapi kebanyakan dari mereka hanya menggunakan javascript menggunakan petunjuk dan peringatan javascript sederhana.

Namun yang akan saya bagikan disini bukan hanya menggunakan javascript saja, melainkan menggunakan html + css agar terlihat profesional dan modern.

Tentang bagaimana melakukan manipulasi login ini, saya membuat overlay popup yang akan menutupi halaman atau artikel yang memiliki kata sandi. Jadi sederhananya, jika kita memasukkan kata sandi dengan benar, hamparan pop-up akan hilang dan halaman atau artikel dapat dilihat.

READ  Cara top up Mtix id untuk nonton film Mumun di bioskop tayang 1 September 2022

Begitu pula sebaliknya, jika kita memasukkan password yang salah, overlay akan terus menutupi isi artikel dan menampilkan pesan peringatan (password yang dimasukkan salah!) dan overlay popup tidak bisa ditutup paksa.

Oke, bagi kalian yang ingin mencobanya, silahkan ikuti langkah-langkah di bawah ini dengan seksama.

Jika Anda ingin melihat demo terlebih dahulu, masukkan kata sandi: siapnada1 di halaman demo.


Tutorial membuat fitur login password

silahkan ketik blogger pilih miliknya > edit html lalu salin kode css di bawah ini dan letakkan dengan benar tentang kode ]]>

/* 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}

Kemudian salin kode javascript berikut dan letakkan tentang kode atau

<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 siapnada1 silahkan ganti dengan password anda, agar password tersebut tidak terlihat oleh orang lain melalui source codenya, anda bisa meng-encode javascript menggunakan Ofuscator Javascript Tools atau tools sejenis. kalau lupa klik simpan

READ  Cara scroll bagian atas WA Chat Anti Lama

Cara menerapkan fitur login kata sandi ke posting

Untuk mendaftar, salin kode di bawah ini di akhir posting Anda dan Anda akan menerima kata sandi. Masukkan kode ini di mode HTML posting blog Anda.

<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>

Penutupan

Demikian juga untuk Cara Membuat Fitur Login Password di Blogger. Jika Anda memiliki pertanyaan, silakan tanyakan melalui kolom komentar dan terima kasih telah berkunjung.

READ  Video Game Perang Dunia II Black Panther dan Captain America Diumumkan oleh Marvel

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

Cara membuat fitur login password di Blogger

Cara membuat fitur login password di Blogger

Source : www.siapngoding.my.id

You May Also Like

About the Author: Omar Dzaki Khawarizmi