bergabung di grup telegram kami

membuat fitur login username + password di blogger

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 :

53 komentar


  1. 28 April, 2021 19:03
    Kalo yang login google sama fb ada gak mas?
    1. 28 April, 2021 19:06
      Tidak ada mas, seperti yang sudah saya sampaikan ini hanya fitur manipulasi tampilan saja, bukan fitur login beneran yang menggunakan database
  2. 02 Mei, 2021 15:17
    Спасибо))
    1. 03 Mei, 2021 12:18
      Пожалуйста
  3. 23 Juli, 2021 15:15
    Bang saya kok gagal ya setiap mau di save, mohon pencerahannya
    1. 23 Juli, 2021 15:46
      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. 23 Juli, 2021 17:21
      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. 23 Juli, 2021 20:22
      Coba html nya letakkan di atas <footer mas, kalau saya tes di blog saya si normal semua di halaman manapun
  4. 23 Juli, 2021 17:30
    https://smpnegerigapura.blogspot.com/2021/07/pengumuman-peserta-terbaik-mpls-smpn-1.html
  5. 07 Agustus, 2021 02:00
    Mis bisa gak password ga di taro di html
    Kan kalo di taro di html tinggal inspect elemen langsung keliatan🙏😅
    1. 07 Agustus, 2021 06:37
      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. 16 Agustus, 2021 14:00
    Could you please allow me to repost on my blog?
    1. 16 Agustus, 2021 14:41
      You can, by including a source link to this blog
  7. 20 Oktober, 2021 10:45
    I have a question how to redirect, to another link please
  8. 15 Februari, 2022 18:31
    min, bisakah proteksi ini hanya untuk beberapa postingan atau halaman saja? bagaimana caranya?
    1. 15 Februari, 2022 19:42
      script nya bisa pasang di postingan atau halaman yang di inginkan saja mas
  9. 23 Februari, 2022 05:06
    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. 23 Februari, 2022 13:23
      nanti jika ada waktu saya update gan, saat ini masih banyak pekerjaan di luar blogger jadi belum sempat
    2. 20 April, 2022 13:57
      sudah saya update penambahan localeStroge agar tidak login terus
  10. 13 April, 2022 18:49
    jika multi user, apakah tiap user bisa ditambahin link berbeda bos?
    misal user1 masuk link A
    user2 nanti masuk link B . thnk
    1. 13 April, 2022 20:07
      di tutorial ini hanya membuka halaman yang sama, dan ini bukan redirect, tetapi membuka halaman yang tertutup oleh pop up login ini
  11. 16 April, 2022 11:31
    bisa gak login nya sekali pertama , tidak untuk setiap halaman blog
    1. 20 April, 2022 13:57
      sudah saya update penambahan localeStroge agar tidak login terus
  12. 18 April, 2022 21:46
    Bang, biar menu login nya hanya muncul sekali bagai mana caranya?setiap saya klik artikel selalu saja ada menu login muncul.
    1. 20 April, 2022 13:56
      sudah saya update penambahan localeStroge agar tidak login terus
  13. 26 April, 2022 15:56
    Please Create tutorial on poll or voting widget.
  14. 26 April, 2022 21:45
    Mencoba komentar
  15. 08 Mei, 2022 17:49
    coba nambah username baru tapi heran ga terdaftar terus
    1. 08 Mei, 2022 20:32
      pastikan yg di atasnya harus di beri koma (,) ya mas
    2. 09 Mei, 2022 08:29
      oke mantap sudh bisa mas ternyata butuh waktu agar terdaftar atau lebih cpatnya hapus cookie terlebih dahulu
  16. 09 Mei, 2022 07:30
    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. 09 Mei, 2022 16:27
      user harus bersihkan cookie di browser mereka mas
  17. 27 Mei, 2022 21:37
    Kalo mau salah satunya aja gimana. ex username aja / password aja
    1. 28 Mei, 2022 06:18
      bisa pakai yg ini
      https://www.wendycode.com/2021/04/membuat-fitur-login-password-di-blogger.html
  18. 05 Juni, 2022 03:36
    Please check this Google login on blogger: https://www.elcreativeacademy.com/p/my-profile.html

    How to make this types of login?
  19. 05 Juni, 2022 08:12
    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. 06 Juni, 2022 06:31
      nanti saya coba dulu ya gan
    2. 15 Juni, 2022 14:19
      silakan gan sudah di buatkan
      https://www.wendycode.com/2022/06/cara-membuat-address-bar-support-darkmode.html
  20. 05 Juni, 2022 15:53
    Keren mas...
    1. 06 Juni, 2022 06:29
      terima kasih
  21. 14 Juni, 2022 00:39
    Met malem gan, saya udah coba code nya tapi kenapa ya user dan passwordnya saya ganti tapi ga bisa masuk (user tidak terdaftar)
    1. 14 Juni, 2022 06:23
      coba hapus cookie pada browser
  22. 21 Juni, 2022 23:15
    request artikel dong, cara bikin "related post" / "baca juga" di tengah artikel dengan thumbnail
  23. 09 Juli, 2022 20:45
    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. 09 Juli, 2022 21:46
      iya sama - sama semoga bermanfaat dan terima kasih sudah berkunjung
  24. 02 Agustus, 2022 13:30
    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. 02 Agustus, 2022 14:44
      anda setidaknya harus memahami sedikit js. ubahlah fungsi yang ada di dalam ceklog() yg kamu inginkan
    2. 02 Agustus, 2022 16:04
      baik bang Mimin, terimakasih ilmunya
  25. 10 Agustus, 2022 23:40
    Kalau untuk di website bisa gak mas
  26. 25 September, 2022 21:13
    Kok saya setiap masukkin usernama & password baru itu suka salah, padahal udh bener ditulisnya, itu gimana ya?
    1. 26 September, 2022 00:22
      bersihkan cache browser dan coba kembali
  27. 19 Desember, 2022 22:44
    Selamat Malam, Min kalau script seperti ini bisa tidak ya digunakan di Wordpress ??
    1. 20 Desember, 2022 11:21
      Saya tidak menggunakan WP jadi untuk cara penerapannya silakan sesuaikan sendiri, yg namanya html css js pasti bisa di load pada web apapun
© 2020 - Wendy Code