Cara Membuat Halaman Blog dipassword, Tampilan Keren seperti Wordpress

9 Mei 2020 - - 21

Membuat halaman/ postingan blog di blogger yang diberi password/ sandi sebelum bisa membaca isi pada halaman tersebut sebenarnya sudah banyak sekali panduannya di internet, anda bisa mencari dengan kata kunci "membuat password pada halaman blogger", anda akan menemukan panduan bagaimana membuat halaman postingan pada blog anda diproteksi dengan password yang bisa anda atur sesuai keinginan anda. Hanya saja dari sekian banyak panduan yang ada, kode javascript yang digunakan untuk memproteksi halaman tersebut tidak sesuai yang saya inginkan.

Saya berkeinginan halaman blog yang di password tersebut tetap bisa tampil secara keseluruhan, hanya pada bagian tertentu saja yang tidak tampil, dan pengunjung wajib memasukan password terlebih dahulu sebelum bisa melihat bagian yang diproteksi, jika anda pernah membuat password pada halaman wordpress, kira-kira seperti itulah yang saya inginkan.

Contohnya, silahkan anda masukkan password: mrmungcom untuk bisa melanjutkan artikel ini:

Masukkan Password Untuk Mengakses Halaman ini!

Alhamdulillah... terbuka juga....

Keren kan? mari langsung kita praktekan tutorial Cara Membuat Halaman Blog dipassword ini:

1. Login blogger, klik entri baru, bisa di halaman/ postingan.
2. Copy/ CTRL+C kode javascript dan css di bawah ini (atau bisa juga anda download kode javascriptnya disini):
   
   <script>
   function verify() {
   if (document.getElementById('password').value === 'mrmungcom') {
   document.getElementById('HIDDENDIV').classList.remove("hidden");
   document.getElementById('credentials').classList.add("hidden");
   } else {
   document.getElementById('error-message').innerHTML = '<em style="color:red; font-style: italic;">Password Salah!</em>';
   document.getElementById('password').setSelectionRange(0, document.getElementById('password').value.length);
   }
   return false;
   }
   </script>
   
   <style>
   .hidden {display: none;} .passwordku{padding:30px;background:#f3f3f3;border-radius:5px;width:250px;} .buttonkls{padding:4px 20px 4px; 20px;background:#3e4282;color:#fff;width:80%;border-radius:5px;} .inputpassw{padding:4px;background:#fff;color:#000;width:75% !important;max-width: 98%;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 id="error-message"></div>
   </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>
3. Tempelkan/ paste pada halaman/ postingan yang akan diberi password dengan sebelumnya mengklik mode HTML.
   
   
   
4. Silahkan anda ganti password yang saya beri warna merah dengan password anda.
   
   
5. Ganti teks yang saya beri warna biru dengan konten yang akan anda proteksi, bisa berupa teks, video, gambar, soal online, dll.
   
   
6. Klik Publikasikan.

Mudah bukan? anda bisa menggunakan kode javascript password halaman blogger ini untuk keperluan mengamankan konten penting yang hanya boleh diakses oleh teman-teman anda, atau siswa siswi anda.

Catatan Tambahan

Kode di atas menggunakan javascript sederhana yang sangat dimungkinkan bisa dilihat passwordnya melalui source halaman blog, maka anda bisa mengenkripsi kode javascript yang ada dalam tag <script>kode javascript yg akan dienkripsi</script> dengan tool online: Enkripsi Javascript
Demikian, selamat mencoba, semoga bermanfaat.