4 Cara Membuat Password di Artikel Blogger/Blogspot

4 Cara Membuat Password di Artikel Blogger/Blogspot
Daftar Isi Artikel

Magelang1337.com
- Tidak semua postingan atau artikel yang dibuat bersifat umum. Terkadang adakalanya seorang blogger ingin membuat sebuah postingan yang sifatnya rahasia. Jadi hanya orang tertentu saja yang bisa membaca artikel tersebut. Pada kesempatan kali ini kami ingin berbagi Cara Membuat Password di Artikel Blog

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>
Perhatikan pada nama password dan URL. Ganti dengan password yang kamu buat dan URL Postingan. Menjadi seperti ini
<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>
Contoh diatas kami membuat hanya 2 password. Jadi jika memasukan semua password dengan benar maka artikel akan terbuka.

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}
}
Lalu simpan kode 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>
Jika sudah untuk menggunakannya sama seperti cara pertama buatlah sebuah artikel atau halaman letakkan pada bagian paling atas kode HTML dibawah:
<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>
Tampilan seperti gambar berikut ini. Untuk melihat demo kamu bisa klik Disini

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>
Lalu masuk mode HTML > Ganti Password Magelang1337 dengan password yang kamu suka > sisipkan pada atas, tengah atau bawah artikel. Cek pada "id=HIDDENDIV class=hidden" ganti konten yang diproteksi dengan konten yang akan diberi password. Contoh cek dibawah ini. Masukan Password Magelang1337.

Masukkan Password Untuk Mengakses Konten ini!

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.