Lihat produk kami Lihat!

Membuat Fitur Form Akses Login Username + Password Di Blogger

Fitur ini membantu kalian yang mempuyai halaman atau artikel bersifat private atau hanya bisa diakses oleh user tertentu,
Membuat Fitur Form Akses Login Username + Password Di Blogger

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

Fitur ini membantu kalian yang mempuyai halaman atau artikel bersifat private atau hanya bisa diakses oleh user tertentu, maka cara ini akan sangat berguna.

Jika mengingat sebelumnya, bahwasanya saya juga sudah pernah memberikan tutorial membuat fitur login password di blogger.

Namun kali ini agak sedikit berbeda dikarenakan saya menambahkan fitur baru yakni fitur "Multi User Login". Dimana fitur ini mengharuskan pengguna memasukan username dan Password untuk login dan mengakses halaman atau artikel yang dikunci.

Jadi postingan atau artikel yang diberi fitur ini akan terlihat lebih rofesional, dikarenan form login memang mengharuskan pengguna memasukan username dan password, berbeda jika hanya memasukan password. Itu hanya mengunci artikel dan semua yang memiliki password akan bisa mengakses, tetapi jika menggunakan Multi User Login, yang dapat mengakses hanyalah user yang telah mendaftar / menjadi member pada form kita. Jelas ya perbedaannya

Tetapi jika kalian merasa ini ribet dan menginginkan yang lebih simpel yaitu hanya menggunakan password tanpa username, kalian bisa cek postingan yang telah saya sebutkan di atas.

Satu yang perlu kalian ingat, bahwa fitur ini hanyalah amnipulasi login saja, bukan melainkan login menggunakan database sungguhan.

Oke, langsung ke tutorialnya.

Jika kalian ingin mencoba demonya sebelum mengikuti langkahnya silahkan gunakan
username: siapngoding
password : 123456


Cara Membuat Fitur Multi Login Username + Password Di Blogger

Pertama masuk ke blogger pilih Tema > edit html. Lalu salin kode css di bawah ini dan letakkan di atas kode ]]></b:skin>

/* login fitur by siapngoding */
.siapngodingloginwrap{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%}}
.siapngodingloginwrap.hidden{display: none}
#siapngodinglogin{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}
.siapngodingjudul{font-size:25px;font-weight: bold;}
#siapngodinglogin input[type="text"],#siapngodinglogin 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;}
#siapngodinglogin input[type="text"]:focus,#siapngodinglogin 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.siapngoding{width:24px;height::24px;fill:#fff}
@media screen and (max-width:480px){#siapngodinglogin{width:350px}}

Selanjutnya kalian salin kode 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.siapngoding.my.id
// last update 20-06-2022 + localStroge
var storeS = localStorage.getItem("users");
if(storeS==null){
  var users = [
    { username: "siapngoding", 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(".siapngodingloginwrap").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(".siapngodingloginwrap").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>

Pada bagian yang saya tandai dengan warna biru siapngoding dan 123456 silakan di ganti dengan username dan password kalian, supaya username password tidak terlihat orang lain kalian bisa encode javascript tersebut menggunakan Javascript Obfuscator atau tools sejenisnya. jika sudah jangan lupa untuk klik simpan

Untuk membuat menjadi Multi Login (bisa diakses dengan beberapa username + password) tinggal kalian ganti pada bagian yang diberi tanda kuning

{ username: "siapngoding", password: "123456" }];

Menjadi

<script>
//<![CDATA[
// multi login fitur post by www.siapngoding.my.id
// last update 20-06-2022 + localStroge
var storeS = localStorage.getItem("users");
if(storeS==null){
  var users = [
{ username: "usernam1", password: "password1" },
    { username: "username2", password: "password2" },
    { username: "username3", password: "password3"}
];
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>

Lalu untuk menambahkan user baru tinggal kalian tambahkan kode

{ username: "usernamekalian", password: "passswordkalian" }];

Tetapi jangan lupa untuk menambahkan tanda koma (,) tiap kalian menambahkan user baru pada akhir dari ...passwordkalian" } yang merupakan bagian atas kode username baru kalian. Intinya tanda koma tersebut sebagai pemisah antar username dan password user satu dengan yang laiinya. Kode penambahan user baru paling akhir jangan diberi tanda koma

Cara Penggunaan Fitur Login Username + Password Pada Artikel atau Halaman Blogger

Untuk cara penggunaan silahkan copy dan salin kode di bawah ini, kemudian letakkanpada bagian akhir postingan atau halaman blog kalian yang ingin diberi akses login.

<dv class="siapngodingloginwrap">
<div id='siapngodinglogin'>
  <div class='siapngodingjudul'>Login</div>
    <input id='username' type='text' placeholder='Username'/><br/>
    <input id='password' type='password' placeholder='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>
    <svg class="siapngoding 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>

Setelah itu jangan lupa untuk memperbarui / publish ulang halaman atau artikel kalian

Penutup

Oke, jadi sekian Cara Membuat Fitur Form Akses Login Username + Password Di Blogger. Semoga bermanfaaat dan terimakasih sudah berkunjung.

Membuat Fitur Form Akses Login Username + Password Di Blogger
Membuat Fitur Form Akses Login Username + Password Di Blogger
*Harga tiap paket berbeda
CHECKOUT

Mau donasi lewat mana?

BRI - Firgiawan Alfurqon (3325-0103-2951-535)
Merasa terbantu dengan artikel ini? Ayo dukung Admin dengan Klik tombol merah.
Selanjutnya mau dibuatkan artikel apalagi? Tulis request kamu di kolom "Posting Komentar"

Posting Komentar

Tinggalkan komentar sesuai topik tulisan, centang Notify me untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
© SIAP NGODING. All rights reserved. Premium By Raushan Design