join grup whatsapp Join

membuat fitur login username + password di blogger

cara membuat fitur login username + password di blogger / blogspot dengan html css dan javascript.
membuat fitur login password di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat fitur login username + 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 username + password di blogger / blogspot ini akan membantu.

pada postingan sebelumnya saya juga sudah perah membagikan membuat fitur login password di blogger.

namun bedahnya sama yang akan saya bagikan kali ini saya menambahkan username dan multi user login, jadi pengguna harus memasukan username dan password untuk bisa mengakses postingan / halaman yang kita kunci.

jadi jika kalian ingin yang lebih simple hanya menggunakan password tanpa username bisa cek postingan yang telah saya sebutkan di atas, namun jika ingin terlihat seperti halaman login pada umunya bisa pakai cara ini.

dan perlu di ingat ini hanyalah fitur manipulasi tampilan saja, bukan fitur login beneran yang mempunyai database. ok langsung aja jika kalian ingin mencobanya mari simak caranya di bawah ini.

jika ingin mencoba demonya gunakan
username: wendycode
password : 123456

Cara Membuat Fitur Login username + Password Di Blogger

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

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

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
var users = [{ username: 'wendycode', 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>

bagian yang saya tandai wendycode dan 123456 silakan di ganti dengan username dan password kalian, agar username 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.

<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

untuk membuat multi user bisa menggunakan javascript di bawah ini.

<script>
//<![CDATA[
// multi login fitur by wendy code
var users = [
    { username: 'wendycode', password: '123456' },
    { username: 'wendyaja', password: 'wendy123' },
    { username: 'wendylagi', password: 'wendylagi333'}
];
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>

jika ingin menambahkan user baru tambahkan

{ username: 'usernamekalian', password: 'passwordkalian' }
yang berada di atasnya harus di akhiri tanda koma ,

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

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

14 komentar

  1. Kalo yang login google sama fb ada gak mas?
    1. Tidak ada mas, seperti yang sudah saya sampaikan ini hanya fitur manipulasi tampilan saja, bukan fitur login beneran yang menggunakan database
  2. Спасибо))
    1. Пожалуйста
  3. Bang saya kok gagal ya setiap mau di save, mohon pencerahannya
    1. script sudah saya perbarui mas, silakan di coba kembali, jika masih ada kendala silakan lampirkan screnshotnya ya agar bisa di cari permsalahannya di mana
    2. Alhamdulillah udah bisa bang di save dan berhasil,
      Saya coba di Halaman berhasil semua.
      Tapi ketika saya pakai di Postingan ada yg sukses ada yang gagal (gak bisa ketik Username dan Passwordnya di form loginnya bang)
    3. Coba html nya letakkan di atas <footer mas, kalau saya tes di blog saya si normal semua di halaman manapun
  4. https://smpnegerigapura.blogspot.com/2021/07/pengumuman-peserta-terbaik-mpls-smpn-1.html
  5. Mis bisa gak password ga di taro di html
    Kan kalo di taro di html tinggal inspect elemen langsung keliatan🙏😅
    1. Password username di javascript kak bukan html, javassctipt bisa di encode jd nnti passwordnya gk bakal keliatan, bisa search di google banyak tools yang bisa di pakai untuk encode javascript
  6. Could you please allow me to repost on my blog?
    1. You can, by including a source link to this blog
  7. I have a question how to redirect, to another link please


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english