BAHYUDIN NOR. Pada turorial sebelumnya saya sudah tulis Bagaimana Cara memberi Password Pada Postingan Blog Tertentu. Jika belum tau. Silahkan baca disini. Nah untuk kali ini kita akan belajar Bagaimana Cara Memberi Password pada Artikel Tertentu di Postingan Blog.
Membuat halaman / postingan blog di blogger yang diberi password / sandi sebelum bisa membaca isi pada halaman tersebut sudah banyak sekali panduannya di internet, anda bisa mencari dengan keyword "membuat password pada halaman blogger", anda akan mendapatkan tutorial bagaimana membuat halaman artikel pada blog anda diproteksi dengan password yang bisa anda atur sesuai keinginan anda.
Hanya saja dari sekian banyak panduan yang ada, arahan javascript yang dipakai untuk memproteksi halaman tersebut tidak cocok yang dikehendaki.
Saya mau halaman atau postingan blog yang di password tersebut tetap bisa tampil secara keseluruhan, cuma pada bagian tertentu saja yang tidak tampil, dan pengunjung wajib memasukan password terlebih dulu sebelum melanjutkan, bila anda pernah membuat password pada halaman wordpress, kira-kira seperti itulah yang saya harapkan.
Contohnya, silahkan anda masukkan password: www.bahyudinnor.com untuk terus melanjutkan membaca postingan ini:
Masukkan Password Untuk Mengakses Halaman ini!
Keren kan? mari langsung kita praktekan panduan Cara Memberi Password pada Artikel Tertentu di Postingan Blog ini:
- Login blogger, klik entri baru, bisa di halaman/ postingan.
- Copy/ CTRL+C Code javascript dan css di bawah ini
- Masukkan Password Untuk Mengakses Halaman ini!
- Tempelkan/ paste pada halaman/ artikel yang akan diberi password dengan sebelumnya mengklik mode HTML.
- Silahkan anda ganti password yang sudah diberi warna merah dengan password anda.
- Ganti teks yang sudah diberi warna biru dengan konten yang akan anda proteksi, bisa berbentukteks, video, gambar, soal online, dll.
- Klik Publikasikan.
<script>
function verify() {
if (document.getElementById('password').value === 'www.bahyudinnor.com') {
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="AKSES HALAMAN" onclick="verify()" />
</div>
</div>
</center>
<div id="HIDDENDIV" class="hidden">
Alhamdulillah... konten yang dipassword bisa terbuka.
Konten yang anda kunci masukan disini, baik teks, gambar, video, dll.
</div>
Praktis bukan? anda bisa menggunakan instruksi javascript password halaman blogger ini untuk kebutuhan mengamankan konten penting yang hanya boleh diakses oleh teman-sahabat anda, atau siswa siswi anda. Demikian, selamat mencoba, biar berfaedah.
Sumber https://www.mrmung.com/