Cara Menghapus MiCloud Pada Xiaomi Redmi 4A ( Rolex )

Daftar Isi

1. Cara menambahkan fitur login di Blogger:
   1. Untuk menambahkan lebih banyak pengguna
      1. Example
   2. Kesimpulan

Hai selamat datang di Blog bertips.com, Jika disini kalian mencari artikel dan ingin membuat postingan atau blog pribadi yang dapat diakses oleh orang tertentu dengan username dan password namun untuk blogger/blogspot? maka kalian tepat menemukan cara di postingan ini. karna cms blogspot sendiri tidak seperti wordpess yang hanya menambahkan plugin saja untuk menambahakan fitur-fitur di blog.

Dalam tutorial kali ini, saya akan menunjukkan Cara Menambahkan Fitur Login di Blogger!

Di Cara kali ini menggunakan JS, CSS, dan HTML untuk fitur login ini!

Jadi jangan membuang waktu mari kita simak cara menambahkan fitur login di dibawah ini:

Cara menambahkan fitur login di Blogger:

• Login ke Dasbor Blogger
• Lalu pilih Tema
• Kemudian klik ikon bawah di dekat opsi sesuaikan
• Kemudian piliih Edit HTML
• Lalu cari  ]]></b:skin> dengan CTRL+F dan paste kode CSS dibawah ini tepat di atasnya

/* Login feature by bertips.com */.lgn{width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;background:flat;background-color:#f3f5fe;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%}}.lgn.hidden{display:none}#lgnid{position:absolute;border-radius:8px;width:400px;padding:30px;display:block;transform:translate(-50%,-50%);top:50%;left:50%;background:flat;background-color:#fff;transition:all .5s ease;border-radius:20px}.lgnttl{font-size:25px;font-weight:700;text-align:center}#lgnid input[type=text],#lgnid input[type=password]{padding:10px;border-radius:40px;margin:10px 0;width:95%;border:1px solid rgba(255,255,255,.2);background:#d3d3d3}#username::-webkit-input-placeholder,#password::-webkit-input-placeholder{color:#000}#lgnid input[type=text]:focus,#lgnid input[type=password]:focus{outline:none}button.login{color:#fff;padding:10px;border-radius:40px;border:none;outline:none;background:#9c27b0;transition:1.5s}
button.login:hover{background-color:red;transition:.5s}@media screen and (max-width:480px){#lgnid{width:350px}}.red{color:red}

• Lalu Simpan HTML
• Lalu buat halaman/postingan atau buka halaman/posting yang ingin Anda tambahkan fitur loginnya
• Pastikan Anda mengalihkan tampilan Tulis ke tampilan HTML
• Lalu paste kode HTML berikut ini di atasnya

<!--[ Login feature ]-->
<div class="lgn">
<div id="lgnid">
  <div class="lgnttl">Login</div>
Related Posts





    <input id="username" type="text" /><br />
    <input id="password" type="password" />
    <br />
  <center><button class="login" onclick="startlog()">Login</button></center>
    <p id="access"></p>
</div>
</div>

Kalian dapat mengubah teks yang disorot pada kotak kode sesuka Anda!

• Kemudian Paste Javascript dibawah ini tepat di atasnya

<script>var storeS=localStorage.getItem("users");if(null==storeS){var users=[{username:"bertips",password:"123"},{ username: 'username_here', password: 'password_here' }];localStorage.setItem("users",JSON.stringify(users))}function getUserUsername(e){return JSON.parse(localStorage.getItem("users")).filter(t=>t.username===e)}function ceklog(){var e=localStorage.getItem("login");null!=e&&"true"==e&&document.querySelector(".lgn").classList.add("hidden")}function startlog(){var e=document.querySelector("#username").value,t=document.querySelector("#password").value;getUserUsername(e.trim()).length>0?getUserUsername(e.trim())[0].password==t.trim()?(document.querySelector(".lgn").classList.add("hidden"),localStorage.setItem("login","true")):document.querySelector("access").innerHTML="<p class='red'>Wrong username or password!</p>":document.querySelector("access").innerHTML="<p class='red'>User not found!</p>"}ceklog();const show=()=>{var e=document.querySelector("#password"),t=document.querySelector(".icon1"),r=document.querySelector(".icon2");"password"===e.type?(e.type="text",r.style.opacity="1",t.style.opacity="0"):(e.type="password",r.style.opacity="0",t.style.opacity="1")};</script>

Jangan lupa ganti username bertips dan password 123!

Untuk menambahkan lebih banyak pengguna

Anda dapat menambahkan lebih banyak pengguna dengan menggunakan kode berikut

{ username: 'username_here', password: 'password_here' }

Example

<script>var storeS=localStorage.getItem("users");if(null==storeS){var users=[{username:"bertips",password:"123"},{ username: 'username_here', password: 'password_here' }];localStorage.setItem("users",JSON.stringify(users))}function getUserUsername(e){return JSON.parse(localStorage.getItem("users")).filter(t=>t.username===e)}function ceklog(){var e=localStorage.getItem("login");null!=e&&"true"==e&&document.querySelector(".lgn").classList.add("hidden")}function startlog(){var e=document.querySelector("#username").value,t=document.querySelector("#password").value;getUserUsername(e.trim()).length>0?getUserUsername(e.trim())[0].password==t.trim()?(document.querySelector(".lgn").classList.add("hidden"),localStorage.setItem("login","true")):document.querySelector("access").innerHTML="<p class='red'>Wrong username or password!</p>":document.querySelector("access").innerHTML="<p class='red'>User not found!</p>"}ceklog();const show=()=>{var e=document.querySelector("#password"),t=document.querySelector(".icon1"),r=document.querySelector(".icon2");"password"===e.type?(e.type="text",r.style.opacity="1",t.style.opacity="0"):(e.type="password",r.style.opacity="0",t.style.opacity="1")};</script>

Kemudian klik Publikasikan untuk menerbitkan pos!

Kesimpulan

Semoga artikel Cara menambahkan fitur login di Blogger ini bermanfaat , Jika Kalian menghadapi masalah atau ragu maka tanyakan pada kolom komentar dibwah ini, bagikan dengan teman Anda,

Terima kasih telah berkunjung.