Home
Blogger
Tutorial

Cara Membuat Password di Halaman Statis / Postingan Blogger

Rz Officialツ
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.

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.rzofficial.eu.org/">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 merah dengan konten yang ingin di password.
  • Ganti RmVybm4uaWQ= dengan password yang tlah di encrypt menggunakan base64.

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.

About the author

Rz Officialツ
Hanya seorang blogger yang tidak pandai menulis artikel, menghabiskan waktu berjam-jam di depan komputer tanpa menulis apa-apa

Post a Comment

Harap Komentar Sesuai Dengan Postingan