Cara Mengunci Postingan dan Halaman di Blog - Sebagai seorang blogger, ada kalanya kita harus memproteksi isi tulisan dari postingan maupun halaman. Apalagi jika menyediakan jasa dan layanan komersial, tulisan biasanya hanya dikhususkan untuk pengunjung tertentu saja.
Cara ini tentu sangat berguna untuk menyortir setiap pengunjung. Selain itu, kegiatan ini juga banyak dilakukan oleh web-web marketplace dalam menjalankan bisnis mereka. Jadi orang tertentu saja yang bisa mengakses halaman terkait.
Pengunjung nantinya akan diberikan kotak berisi arahan untuk memasukkan kata sandi. Kurang lebih tampilannya seperti berikut:
Bagi pengguna WordPress, mengunci halaman dapat dilakukan dengan mudah menggunakan plugin yang banyak disediakan. Berbeda dengan pengguna Blogger yang harus memasang secara manual, itupun jika skripnya tersedia.
Nah diartikel kali ini, saya menyediakan 2 jenis tampilan, yaitu versi terang dan gelap. Untuk lebih lengkapnya, silahkan melihat demo berikut:
Sekarang lanjut ke tutorialnya yuk!
Cara Mengunci Postingan dan Halaman di Blog
- 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 -->Catatan
Atur password yang ingin Anda gunakan dengan mengubah eri123. Selain itu, jangan lupa mengganti # dengan URL blog teman-teman.
Rekomendasi:
Penutup
Postingan dan halaman Anda sekarang dapat dikunci sesuai kebutuhan. Selain mudah digunakan, skrip di atas juga dapat diubah sesuka hati berdasarkan kode yang telah ditandai.
Cukup sekian artikel tentang Cara Mengunci Postingan dan Halaman di Blog ini, Terima kasih.