Cara yang kami bagikan ini bisa juga diterapkan pada halaman statis dengan menggunakan javascript untuk membuat passwordnya. Javascript ini selain simple untuk dipakai, yang pasti sangat bagus untuk digunakan karena kamu dapat mengamankannya melalui encrypt javascript.
Kelebihan Memakai Password pada artikel
Password itu akan berfungsi untuk melindungi dari banyaknya orang yang dapat melihat isi artikel tersebut. Kamu dapat menyimpan suatu hal yang sifatnya rahasia. Untuk sekarang ini pemakaian seperti password sudah banyak yang memakainya dan berhasil. Saat kamu mau merubah password, mudah sekali.
Khusus yang memakai platform WordPress jika ingin memakai password di postingan tak membutuhkan kode seperti ini, cukup dengan memanfaatkan fitur Visibility pada postingan tersebut sedangkan untuk blogspot harus memakai kode. Dan berikut Cara Membuat Password di Artikel Blog
Panduan Membuat Password pada Artikel atau Halaman
1. Membuat Password di Artikel (JavaScript)
Dengan cara ini kamu bisa membuat password pada halaman artikel caranya :
- Login Blogger
- Buatlah postingan atau Halaman statis
- Kemudian rubah menjadi tampilan HTML
- Masukan kode dibawah ini tepat dibagian atas
<script language="JavaScript">
var password;
var pass1="NAMA PASSWORD";
password=prompt('Enter your password in order to view this page!',' ');
if (password==pass1) alert('Correct password, OK to enter!');
else {
window.location="URL"; }
</script><script language="JavaScript">
var password;
var pass1="magelang1337";
password=prompt('Enter your password in order to view this page!',' ');
if (password==pass1) alert('Correct password, OK to enter!');
else {
window.location="https://magelang1337.net/p/cara-membuat-password.html";
}
</script>2. Membuat Password di Artikel (JavaScript Double Pass)
Jika diatas membuat password pada artikel dengan 1 password maka dibawah ini Pemakaian bisa lebih dari satu, dengan memodifikasi script dibawah kamu bisa membuat banyak password. Caranya kamu tinggal menambahkannya lagi percabangan else if di bagian javascript.
<script language="JavaScript">
var magelang1337kodepassword;
var magelang1337pass1="magelangkode1";
var magelang1337pass2="magelangkode2";
magelang1337kodepassword=prompt('Masukkan password untuk membuka halaman ini!','');
if (magelang1337kodepassword==magelangkodepass1) alert('Password Benar! Klik OK untuk membuka halaman ini!');
else if (magelang1337kodepassword==magelangkodepass2) alert('Password Benar! Klik OK untuk membuka halaman ini!');
else {
window.location="https://magelang1337.com/p/laman-statis-di-password-blogger.html";
}
</script>3. Membuat Password di Artikel (CSS)
Ada cara lagi yang bisa dibilang lebih keren. Tampilan pop-up pada artikel akan lebih elegan. Untuk caranya simak dibawah ini:
- Login ke Blogger > Tema > Edit HTML
- Letakan kode 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}
}<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><h1>Password Overlay.</h1>
<p>Credit to Magelang1337, author of Magelang1337.com</p>
<div id="protect-body" class="body" style="margin:3em 0;">
<a href="https://magelang1337.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">Magelang1337</span></p>
<div id="protect-refresh">
<form target='b()' method="GET">
<button type="submit" id="refreshbtn">Refresh</button>
</form>
</div>
4. Membuat Password di Artikel (JavaScript V2)
Selanjutnya untuk membuat password pada artikel blog masih menggunakan JS. Script ini sangat simple caranya cukup salin kode dibawah ini
<script>
function verify() {
if (document.getElementById('password').value === 'Magelang1337') {
document.getElementById('HIDDENDIV').classList.remove("hidden");
document.getElementById('credentials').classList.add("hidden");
} else {
alert('Password Salah!');
password.setSelectionRange(0, password.value.length);
}
return false;
}
</script>
<style>
.hidden {display: none;}
.passwordku{padding:30px;background:#f3f3f3;border-radius:5px;width:300px;}
.buttonkls{padding:4px 20px 4px; 20px;background:#3e4282;color:#fff;width:80%;border-radius:5px;}
.inputpassw{padding:4px;background:#fff;color:#000;width:80%;text-align:center;border-radius:5px;margin-bottom:3px;}
.ketpassword{text-align:center;margin-bottom:5px;}
</style>
<center>
<div id="credentials">
<div class="passwordku">
<div class="ketpassword">
Masukkan Password Untuk Mengakses Halaman ini!
</div>
<input class="inputpassw" type="text" id="password" onkeydown="if (event.keyCode == 13) verify()" />
<br/>
<input class="buttonkls" id="button" type="button" value="Buka Halaman" onclick="verify()" />
</div>
</div>
</center>
<div id="HIDDENDIV" class="hidden">
Konten yang akan di proteksi.
</div>
Masukkan Password Untuk Mengakses Konten ini!
Artikel Lengkap tentang Cara Membuat Password di Artikel Blog
Gimana keren kan? Kamu tinggal memilih cara diatas sesuai dengan keinginan kamu. Demikianlah artikel singkat mengenai Cara Membuat Password di Artikel Blog yang dapat kami bagikan. Semoga bermanfaat, Jangan lupa untuk berkunjung ke halaman facebook kami @magelang1337. Terima kasih.
