Cara Memberi Password pada Dokumen Postingan Blog

Kali ini saya akan menjelaskan tutorial bagaimana caranya memberi Password pada dokumen yang ada di dalam postingan blog.

Untuk menyembunyikan dokumen di artikel blog ini, kita membutuhkan yang namanya fungsi ATOB & BTOA dari JavaScript (Js).

Sebenarnya dokumen yang dimaksud di sini adalah Div atau Element tertentu. Contohnya, tombol Download yang tidak aktif. Untu mengaktifkannya, harus mengisi Password. Saya kira paham, ya :)

Cara Memberi Password pada Dokumen Postingan Blog

Login ke Blogger > Tema > Edit HTML

Simpan CSS di bawah ini di atas kode </style> atau </b:skin>

*{margin:0;padding:0;box-sizing:border-box}
h1{margin-bottom:.25em}
html{padding:10%}
html, input, button{font-family:Google Sans, sans-serif}
#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:#9c88ff;border:2px solid transparent;outline:0;color:#fff;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:#1db954;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}
}

Lalu simpan kode JavaScript (Js) di bawah ini di atas kode </head> atau </body>

<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('TW9jY2F0b3J5')) {
            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>

Untuk memanggil fungsi Password Overlay tersebut, HTML yang digunakan:

<h1>Password Overlay.</h1>
<p>Credit to Taufik Nurrohman, author of DTE.web.id</p>
<div id="protect-body" class="body" style="margin:3em 0;">
<a href="https://kodebloggerku.blogspot.com/">Visit my blog! <3 </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">KodeBlogger</span></p>
  <div id="protect-refresh">
  <form target='b()' method="GET">
    <button type="submit" id="refreshbtn">Refresh</button>
  </form>
  </div>

Itulah tutorial bagaimana caranya memberikan Password pada Element blog yang ada di artikel blog.

Sumber: https://moccatory.blogspot.com/2019/01/password-overlay-dengan-show-password-toggle.html