"Diskusibareng" Gabung Group Telegram Gabung!

Cara Menambahkan Fitur Login di Blogger Dengan Mudah

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
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>
<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.

    About the Author

    Be serious about doing something

    Posting Komentar

    Silahkan berkomentar sesuai TOPIK diluar itu akan admin hapus komentar yang berbau spam,link aktif, judi dan pornografi dll.

    Terimakasih.
    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.