bergabung di grup telegram kami

membuat fitur login username + password di blogger

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

{ 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 :
tutorial blogger

51 komentar



image quote pre code
  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
  8. min, bisakah proteksi ini hanya untuk beberapa postingan atau halaman saja? bagaimana caranya?
    1. script nya bisa pasang di postingan atau halaman yang di inginkan saja mas
  9. tolong dong min widget yang ini ato yang versi simpel password aja..
    fix.in javascript.nya pake localStorage biar gaa masukin password lagi pas direfresh page.nya..
    sama tambahin tombol logoutnya..
    localStorage remove.. 🙏🙏
    please..
    ku ulik gaa kena" dari semalam.. :(
    1. nanti jika ada waktu saya update gan, saat ini masih banyak pekerjaan di luar blogger jadi belum sempat
    2. sudah saya update penambahan localeStroge agar tidak login terus
  10. jika multi user, apakah tiap user bisa ditambahin link berbeda bos?
    misal user1 masuk link A
    user2 nanti masuk link B . thnk
    1. di tutorial ini hanya membuka halaman yang sama, dan ini bukan redirect, tetapi membuka halaman yang tertutup oleh pop up login ini
  11. bisa gak login nya sekali pertama , tidak untuk setiap halaman blog
    1. sudah saya update penambahan localeStroge agar tidak login terus
  12. Bang, biar menu login nya hanya muncul sekali bagai mana caranya?setiap saya klik artikel selalu saja ada menu login muncul.
    1. sudah saya update penambahan localeStroge agar tidak login terus
  13. Please Create tutorial on poll or voting widget.
  14. Mencoba komentar
  15. coba nambah username baru tapi heran ga terdaftar terus
    1. pastikan yg di atasnya harus di beri koma (,) ya mas
    2. oke mantap sudh bisa mas ternyata butuh waktu agar terdaftar atau lebih cpatnya hapus cookie terlebih dahulu
  16. bang, mau tanya, loginnya memang bagus cuma sekali login, nah cara untuk nutupnya lagi gimaana bang ? biar user yang pernah buka harus login lagi
    1. user harus bersihkan cookie di browser mereka mas
  17. Kalo mau salah satunya aja gimana. ex username aja / password aja
    1. bisa pakai yg ini
      https://www.wendycode.com/2021/04/membuat-fitur-login-password-di-blogger.html
  18. Please check this Google login on blogger: https://www.elcreativeacademy.com/p/my-profile.html

    How to make this types of login?
  19. Gan, bisa buatin meta theme color yang bisa diubah ketika darkmode dan lightmode? Contohnya gan https://dark-mode-baseline.glitch.me/
    Gw udah coba dengan mengosongkan content di 3 meta tags <script>function themeX(){document.querySelector('meta[name="theme-color"]').setAttribute("content",hX+the)}var the=["131417"],hX="#",link=document.createElement("meta");
    </script>
    dengan onclick='darkMode();themeX();'. Masalahnya itu tidak bisa tersimpan seperti darkmode, direload saja sudah putih lagi address barnya dan hanya satu kali klik. Tolong gan buatin tutorialnya 🙏
    1. nanti saya coba dulu ya gan
    2. silakan gan sudah di buatkan
      https://www.wendycode.com/2022/06/cara-membuat-address-bar-support-darkmode.html
  20. Keren mas...
    1. terima kasih
  21. Met malem gan, saya udah coba code nya tapi kenapa ya user dan passwordnya saya ganti tapi ga bisa masuk (user tidak terdaftar)
    1. coba hapus cookie pada browser
  22. request artikel dong, cara bikin "related post" / "baca juga" di tengah artikel dengan thumbnail
  23. keren, banyak belajar dar blog ini, makasih banyak mas, work 100% di blog ku meski di awal ada kendala pas ganti username sama password itu gak bisa masuk ketika sudah di encode. Tapi akhirnya bisa juga setelah cari tutorial encode javascriptnya. Makasih banyak mas.
    1. iya sama - sama semoga bermanfaat dan terima kasih sudah berkunjung
  24. Selamat sore admin, admin izin bertanya saya ingin membuat form login di blog saya seperti pada artikel https://www.wendycode.com/2021/04/membuat-fitur-login-username-password-diblogger.html?m=1.
    Saya berhasil memasukkan kode, tapi saya coba log ini tidak mengarah kepada halaman yang di inginkan. Mohon petunjuk lebih lanjut Mimin. Terimakasih bantuannya .
    1. anda setidaknya harus memahami sedikit js. ubahlah fungsi yang ada di dalam ceklog() yg kamu inginkan
    2. baik bang Mimin, terimakasih ilmunya
  25. Kalau untuk di website bisa gak mas
  26. Kok saya setiap masukkin usernama & password baru itu suka salah, padahal udh bener ditulisnya, itu gimana ya?
    1. bersihkan cache browser dan coba kembali
© 2020 - Wendy Code