Status :

Cara memberi password pada halaman/postingan blog

 

Hi blogger, di artikel ini aku ingin berbangi tutorial modifikasi template blogger lagi yaitu: Cara Membuat Password di Halaman Statis atau dipostingan blogger.
Membuat Password di Halaman Statis atau dipostingan blogger berguna untuk membatasi akses pengnjung untuk melihat konten yang ada di halaman tersebut.Dengan trik seperti ini tentunya membuat privasi pemilik web lebih terjaga, sehingga tak perlu khawatir lagi jika akan terindex secara otomatis oleh mesin telusur seperti Google, Bing, dan lain-lain.

Demo

Berikut ini adalah cara membuatnya


Langkah 1:Login ke akun blogger kalian
Langkah 2:Buat postingan baru kemudian pilih mode HTML bukan mode Compose.
Langkah 3:Silakan copy kode dibawah ini pastekan  ke halaman yang baru kalian buat:

<div id="protect-body" class="body" style="margin:3em 0;">
<a href="https://gallerycode.blogspot.com/">Visit and follow my blog</a>
</div>
<div id="protect-overlay" class="overlay" style="margin:3em 0;">
<form action="a()" method="GET">
<input name="answer" id="password" type="password" placeholder="Password"/>
<button type="submit">Unlock Items</button>
<div class="toggle-wrapper"><input id="togglepassword" type="checkbox" onclick="x()" value="Show Password"><lable>Show Password</lable></div>
</form>
</div>
 
<p>Password : <span style="color:red">Buka</span></p>
  <div id="protect-refresh">
  <form target='b()' method="GET">
    <button type="submit" id="refreshbtn">Refresh</button>
  </form>
  </div>
<style>
#protect-overlay input{width:75%;margin:0 5px .5em 0;padding:12px;border:0;outline:0;background:#ddd;border-radius:3px;transition:.3s all}
#protect-overlay input:focus, #protect-overlay input:active{border:2px solid #9c88ff;background:#fff;color:#222;}
#protect-overlay button{width:unset;margin:.5em 0 .5em 5px;padding:10px 15px;background:#fbdb40;border:2px solid transparent;outline:0;color:#353535;border-radius:3px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.3);transition:.3s all;}
#protect-overlay button:hover{background:#fff;border:2px solid #9c88ff;color:#9c88ff}
#protect-overlay input#togglepassword{margin:10px 5px 0 0;padding:0;width:unset;}
.toggle-wrapper{display:block;}
button#refreshbtn{height: unset;padding:10px 15px;margin-top:1em;background:#9c88ff;border:0;outline:0;color:#fff;border-radius:3px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.05)}

@media only screen and (max-width: 728px) {
  #protect-overlay button{margin-left:0}
  #protect-overlay input{margin-right:0}
</style>
<script type='text/javascript'>
(function() {
    var o = document.getElementById('protect-overlay');
    var s = document.getElementById('protect-body');
    var b = document.getElementById('protect-refresh');
    s.style.display = "none";
    o.getElementsByTagName('form')[0].onsubmit = function() {
        if (this.answer.value === atob('QnVrYQ==')) {
            alert('Password Benar!');
            o.style.display = "none"; // passed!
            s.style.display = "block";
        } else {
            alert('Wrong password!');
        }
        return false;
    };
    b.getElementsByTagName('form')[0].onsubmit = function() {
        o.style.display = "block";
        s.style.display = "none";
        return false;
    };
})();
function x() {
var x = document.getElementById("password");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
function a() {
var a = document.getElementById("password");
  if (x.type === "text") {
    x.type = "password";
  } else {
    x.type = "password";
  }
}
</script>
Catatan:
  • Ganti Linkhttps://gallerycode.blogspot.com/ dengan konten yang ingin di password.
  • kalia bisa menghapus atau tidak kode<p>Password : <span style="color:red">Buka</span></p> jika tidak dihapus ganti tulisan Buka
  • Ganti QnVrYQ== dengan password yang telah di encrypt menggunakan base64.


Membuat Password Base64

Gunakan tools dibawah ini untuk memudahkan kalian membuat passwordnya sesuai keinginan.

Password Base64:-Gallery Code


penutup

Nah,itulah cara membuat password dihalaman atau postingan blogger.gimana mudah buakan jiaka ada pertanyaan kalian bisa bertanya di kolom komentar

refrensi:https://www.fernn.id/2020/09/cara-membuat-password-di-halaman-blogger.html
Baca juga :
Utamakan ngopi pagi hari,, karna hidup butuh inspirasi bukan caci maki... | Blogger | pelajar | Yo..|

1 komentar

  1. menarik juga, tapi untuk password bisa pakai array object juga untuk membuat lebih dari satu password
© Alfatechnesia. All rights reserved. Distributed by zidarma