Cara Mengunci Artikel Postingan dan Halaman di Blog 2023

Sebagai seorang blogger, terkadang kita perlu menyimpan konten teks dari postingan atau halaman. Apalagi jika Anda menawarkan jasa dan layanan bisnis, teks biasanya hanya disertakan untuk pengunjung tertentu. Cara ini sangat berguna untuk mengatur setiap pengunjung. Selain itu, layanan ini juga dilakukan oleh banyak situs pemasaran web sebagai bagian dari manajemen layanan mereka. Oleh karena itu, hanya orang tertentu yang dapat mengakses halaman terkait.

 

Pengunjung akhirnya akan menerima sebuah kotak dengan instruksi untuk memasukkan kata sandi. Kurang lebih tampilannya seperti ini:

Ilustrasi Kunci blog. Foto : ferisp

Untuk pengguna WordPress, halaman kunci dapat dibuat dengan mudah menggunakan banyak plugin yang disediakan. Tidak seperti pengguna Blogger yang harus memasukkannya secara manual, meskipun teksnya tersedia. Oleh karena itu, dalam artikel ini saya mengusulkan 2 jenis pemikiran, yaitu versi terang dan gelap. Untuk lebih jelasnya, silakan lihat presentasi ini:

Yuk masuk ke tutorialnya sekarang!

Cara mengunci postingan dan halaman blog

Berikut langkah - langkah yang harus anda lakukan untuk mengunci postingan dan halaman blog anda.

• Masuk ke BLOGGER
• Pilih postingan yang akan diproteksi / dikunci
• Pilih TAMPILAN HTML
• Tempel skrip pilihan di bagian bawah tulisan
• Pilih PERBARUI atau PUBLIKASIKAN
• Selesai.

Post Locker Style

Light

 <!-- HTML -->
<div id="postLocker" oncontextmenu="return false">
  <div class="lockerContainer" id="postLock">
    <div class="lockerTitle">LOGIN</div>
    <div class="lockerDescription">Login before opening the page!</div>
    <input id="lockerPassword" type="text" placeholder="Your password here..." onkeydown="if(event.keyCode==13)postLock()"/>
    <div class="lockerButton" onclick="postLock()"><i class="mainIcon lockIcon"></i>Login</div>
    <div class="lockerOut">
      <a href="#" title="Homepage">Back to homepage</a>
    </div>
  </div>
</div>
<div id="lockerContent" class="contentHide"/>
<!-- End HTML -->

<!-- CSS -->
<style>
/* Post Locker by www.ferisp.com */
#postLocker{position:fixed;width:100%;height:100%;background:rgba(0,0,0,.01);font-family:"Noto Sans",sans-serif;top:0;left:0;right:0;bottom:0;backdrop-filter:blur(8px);z-index:999}
.lockerContainer{position:relative;width:35%;background:#fff;top:50%;left:50%;padding:30px;transform:translate(-50%,-50%);border-radius:15px;box-shadow:0 0 30px 0 rgba(0,0,0,.15)}
#lockerPassword{width:100%;background:#fff;color:#333;margin-bottom:7px;padding:10px;box-shadow:0 0 8px 0 rgba(0,0,0,.1)}
#lockerPassword::placeholder{color:#bbb;font-size:14px}
.lockerTitle{color:rgba(0,0,0,.5);font-size:45px;font-weight:bold;margin-top:10px;margin-left:-3.5px}
.lockerDescription{color:#333;font-size:14px;margin:15px 0}
.lockerOut a{color:#666;font-size:12px}
.lockerOut a:hover{color:#666}
.contentHide{display:none}
.lockerButton{display:inline-flex;background:#009ee0;color:#fff;font-size:13px;line-height:22px;align-items:center;margin:15px 0 10px 0;padding:10px 20px 10px 15px;outline:0;border:0;border-radius:0 30px 30px 30px;cursor:pointer}
.lockerButton:hover{background:#068ac2}
.mainIcon{display:inline-block;width:18px;height:18px;margin-right:12px;background-size:cover;background-repeat:no-repeat;background-position:center center}
.mainIcon.lockIcon{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><g transform='translate(3.500000, 2.000000)'><path d='M12.9709,7.4033 L12.9709,5.2543 C12.9399,2.7353 10.8719,0.7193 8.3539,0.7503 C5.8869,0.7813 3.8919,2.7673 3.8499,5.2343 L3.8499,7.4033'></path><line x1='8.4103' y1='12.1562' x2='8.4103' y2='14.3772'></line><path d='M8.4103,6.8242 C2.6653,6.8242 0.7503,8.3922 0.7503,13.0952 C0.7503,17.7992 2.6653,19.3672 8.4103,19.3672 C14.1553,19.3672 16.0713,17.7992 16.0713,13.0952 C16.0713,8.3922 14.1553,6.8242 8.4103,6.8242 Z'></path></g></svg>")}
@media screen and (max-width:700px){.lockerContainer{width:95%;border-radius:3px}}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script>
function postLock(){if(document.getElementById("lockerPassword").value==="eri123"){document.getElementById("lockerContent").classList.remove("contentHide");document.getElementById("postLocker").classList.add("contentHide")}else{alert("Wrong Password!");lockerPassword.setSelectionRange(0,lockerPassword.value.length)}return false}
</script>
<!-- End JavaScript -->  

Dark

  <!-- HTML -->
<div id="postLocker" oncontextmenu="return false">
  <div class="lockerContainer" id="postLock">
    <div class="lockerTitle">LOGIN</div>
    <div class="lockerDescription">Login before opening the page!</div>
    <input id="lockerPassword" type="text" placeholder="Your password here..." onkeydown="if(event.keyCode==13)postLock()"/>
    <div class="lockerButton" onclick="postLock()"><i class="mainIcon lockIcon"></i>Login</div>
    <div class="lockerOut">
      <a href="#" title="Homepage">Back to homepage</a>
    </div>
  </div>
</div>
<div id="lockerContent" class="contentHide"/>
<!-- End HTML -->

<!-- CSS -->
<style>
/* Post Locker by www.ferisp.com */
#postLocker{position:fixed;width:100%;height:100%;background:#131417;font-family:"Noto Sans",sans-serif;top:0;left:0;right:0;bottom:0;z-index:999}
.lockerContainer{position:relative;width:35%;background:#252830;top:50%;left:50%;padding:30px;transform:translate(-50%,-50%);border-radius:15px;box-shadow:0 0 30px 0 rgba(0,0,0,.7)}
#lockerPassword{width:100%;background:rgba(255,255,255,.1);color:#eee;margin-bottom:7px;padding:10px}
#lockerPassword::placeholder{color:#888;font-size:14px}
.lockerTitle{color:#aaa;font-size:45px;font-weight:bold;margin-top:10px;margin-left:-3.5px}
.lockerDescription{color:#eee;font-size:14px;margin:15px 0}
.lockerOut a{color:#bbb;font-size:12px}
.lockerOut a:hover{color:#aaa}
.contentHide{display:none}
.lockerButton{display:inline-flex;background:#009ee0;color:#eee;font-size:13px;line-height:22px;align-items:center;margin:15px 0 10px 0;padding:10px 20px 10px 15px;outline:0;border:0;border-radius:0 30px 30px 30px;cursor:pointer}
.lockerButton:hover{background:#068ac2}
.mainIcon{display:inline-block;width:18px;height:18px;margin-right:12px;background-size:cover;background-repeat:no-repeat;background-position:center center}
.mainIcon.lockIcon{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eeeeee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><g transform='translate(3.500000, 2.000000)'><path d='M12.9709,7.4033 L12.9709,5.2543 C12.9399,2.7353 10.8719,0.7193 8.3539,0.7503 C5.8869,0.7813 3.8919,2.7673 3.8499,5.2343 L3.8499,7.4033'></path><line x1='8.4103' y1='12.1562' x2='8.4103' y2='14.3772'></line><path d='M8.4103,6.8242 C2.6653,6.8242 0.7503,8.3922 0.7503,13.0952 C0.7503,17.7992 2.6653,19.3672 8.4103,19.3672 C14.1553,19.3672 16.0713,17.7992 16.0713,13.0952 C16.0713,8.3922 14.1553,6.8242 8.4103,6.8242 Z'></path></g></svg>")}
@media screen and (max-width:700px){.lockerContainer{width:95%;border-radius:3px}}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script>
function postLock(){if(document.getElementById("lockerPassword").value==="eri123"){document.getElementById("lockerContent").classList.remove("contentHide");document.getElementById("postLocker").classList.add("contentHide")}else{alert("Wrong Password!");lockerPassword.setSelectionRange(0,lockerPassword.value.length)}return false}
</script>
<!-- End JavaScript --> 

Penting!

Tetapkan kata sandi yang ingin Anda gunakan dengan mengubah eri123. Juga, jangan lupa untuk mengganti # dengan URL blog Anda.

Penutup

Postingan dan halaman Anda kini dapat dikunci sesuai keinginan anda. Selain kemudahan penggunaan, script di atas dapat dimodifikasi dan berdasarkan kode yang telah dikodekan. Artikel bagus tentang cara mengunci posting dan halaman di blog.