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 <!--</body>--></body>
<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.
Referensi:
https://www.wendycode.com/2021/04/membuat-fitur-login-username-password-diblogger.html
Join the conversation