Cara Membuat Password Pada Halaman Statis Blogger

Cara Membuat Password Pada Halaman Statis Blogger
Cara Membuat Password Pada Halaman Statis Blogger

Cara Membuat Password Pada Halaman Statis Blogger -  Hallo sahabat ruangcoder pada kesempatan kali ini saya akan  berbagi kembali seputar dunia blogging yaitu tentang Cara Membuat Password di Halaman Statis Blogger  yang bisa berguna untuk membatasi akses pengunjung atau visitor blog kalian untuk melihat konten yang dimaksud. Dengan trik seperti inilah yang dimana tentunya membuat privasi pemilik web atau blog akan lebih terjaga, sehingga kalian sendiri tak perlu khawatir lagi akan terindex secara otomatis oleh mesin telusur seperti Google, Bing, dan lain - lain.

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

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

Kode Bahan Pembuatan

Untuk menerapkan tutorial ini kalian pastikan bisa menyisipkan 3 jenis kode berikut ini diantaranya yang terdiri dari 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.ruangcoder.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">Ruangcoder.com</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('UnVhbmdjb2Rlci5jb20=')) {
            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 pada Halaman Statis Blogger

Agar script ini bisa berjalan dengan baik, silahkan kalian ikuti urutan kode berikut ini ke dalam halaman statis atau postingan yang ingin disisipkan password.
  1. Silahkan login terlebih dahulu ke Blogger kalian, lalu masuk ke menu Postingan > Entri Baru silahkan pilih metode penulisan HTML bukan Compose



  2. Kemudian langsung kalian sisipkan ketiga kode berikut ini ke dalam halaman statis ataupun postingan baru kalian.

  3. <div id="protect-body" class="body" style="margin:3em 0;">
    <a href="https://www.ruangcoder.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">Ruangcoder.com</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('UnVhbmdjb2Rlci5jb20=')) {
                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 kalian kasih password.
Ganti UnVhbmdjb2Rlci5jb20= dengan password yang telah kalian encrypt menggunakan base64.

Membuat Password Base64

Gunakan tools berikut ini untuk memudahkan kalian dalam membuat passwordnya sesuai keinginan, silahkan kalian kesini kemudian pilih pada menu Encode. 

Penutup 

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

Mungkin sekian dahulu artikel dari Cara Membuat Password Pada Halaman Statis Blogger semoga selalu bermanfaat untuk kalian semua. Terimakasih