Cara Membuat Password di Halaman Statis / Postingan Blogger

Membuat Password di Halaman Blogger
Fernn.id - Pada kesempatan kali ini kami ingin berbagi kembali seputar blogging yaitu Cara Membuat Password di Halaman / Postingan Blogger yang bisa berguna untuk membatasi akses pengunjung untuk melihat konten yang dimaksud. Dengan trik seperti ini tentunya membuat privasi pemilik web lebih terjaga, sehingga tak perlu khawatir lagi akan terindex secara otomatis oleh mesin telusur seperti Google, Bing, dan lain-lain.

Membuat password pada konten entah itu dilaman statis atau postingan merupakan sebagai pengganti halaman login, yang kita ketahui sangatlah rumit membuatnya di platform blogger sehingga alternatifnya bisa menggunakan trik ini. Namun pada berbagai aspek mungkin ada beberapa kekurangan yang tidak secara keseluruhan bisa menjadi pengganti dari halaman login.

Kami sendiri menggunakan trik ini karena khawatir jika disuatu laman privasi kami akan terindex mesin telusur, sehingga kami memutuskan untuk mencari alternatifnya dan akhirnya dapat menemukan salah satu artikel di DTE Website yang menurut kami cukup mudah diterapkan dan tidak memberatkan loading halaman tersebut.

Berikut ini script yang dibutuhkan, jika menyukainya bisa kalian pasang juga tentunya di blog masing-masing.


Kode Bahan Pembuatan

Untuk menerapkan tutorial ini pastikan sobat bisa menyisipkan 3 jenis kode berikut ini diantaranya HTML, CSS dan JS kedalam halaman statis atau postingan yang dimaksud.

HTML

<div id="protect-body" class="body" style="margin:3em 0;">
<a href="https://www.fernn.id/">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">Fernn.id</span></p>
  <div id="protect-refresh">
  <form target='b()' method="GET">
    <button type="submit" id="refreshbtn">Refresh</button>
  </form>
  </div>

CSS

#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}

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('RmVybm4uaWQ=')) {
            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";
  }
}


Penerapan di Halaman

Agar script ini berjalan dengan baik, silahkan ikuti urutan kode berikut ini ke dalam halaman statis atau postingan yang ingin disisipkan password.

1. Silahkan login terlebih dahulu ke Blogger, lalu masuk ke menu Postingan > Entri Baru silahkan pilih metode penulisan HTML bukan Compose.

2. Kemudian sisipkan ketiga kode berikut ini ke dalam halaman statis ataupun postingan baru kalian.
<div id="protect-body" class="body" style="margin:3em 0;">
<a href="https://www.fernn.id/">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">Fernn.id</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('RmVybm4uaWQ=')) {
            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 tulisan warna kuning dengan konten yang ingin di password.
  • Ganti RmVybm4uaWQ= dengan password yang tlah di encrypt menggunakan base64.


Membuat Password Base64

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



Penutup

Nah, bagaimana sob? jika mengalami kesulitan atau ada script error dan lain sebagainya, bisa langsung berkomentar dibawah artikel ini, yang sebisa mungkin akan admin balas jika tidak ada kesibukan diluar kegiatan blogging.

Mungkin sekian dahulu artikel dari Cara Membuat Password di Halaman Statis / Postingan Blogger semoga selalu bermanfaat.
Terimakasih