Pasang passcode untuk blog
Walaupun blogspot ada fungsi invite readers only, tapi kita boleh set letak passcode untuk sesiapa yang nak akses blog kita.
Ini scriptnya
<script type="text/javascript"> var passcode = "YOUR_PASSCODE_HERE"; var accessDuration = 60 * 60 * 1000; // 1 hour in milliseconds function passCheck() { var enteredPasscode = document.getElementById('pass').value; var errorMessage = document.getElementById('errorMessage'); if (enteredPasscode === passcode) { var expirationTime = new Date().getTime() + accessDuration; localStorage.setItem('passcode', enteredPasscode); localStorage.setItem('expirationTime', expirationTime); document.getElementById('passDiv').style.display = 'none'; document.getElementsByTagName('body')[0].style.overflow = 'auto'; errorMessage.textContent = ''; } else { errorMessage.textContent = 'Invalid passcode. Please try again.'; } return false; } window.onload = function() { var storedPasscode = localStorage.getItem('passcode'); var expirationTime = localStorage.getItem('expirationTime'); var currentTime = new Date().getTime(); if (storedPasscode !== passcode || currentTime > expirationTime) { localStorage.removeItem('passcode'); localStorage.removeItem('expirationTime'); document.getElementById('passDiv').style.display = 'flex'; document.getElementsByTagName('body')[0].style.overflow = 'hidden'; } }; </script> <div id='passDiv'> <form onsubmit='return passCheck()'> <div class='logo'> <img alt='Logo' src='https://blogger.googleusercontent.com/img/a/AVvXsEhoquAr0U2kpwFKS3Qg8dCdyzkhbhYv9TodUNazISe8jEwcqBmisDQUrJhhvMW54IOA1pdMmJq-LR5zSaBvntWfTj40DZEUf4SZhCOKLuLxonJPWF5LGKJK9HxZSksyryH_EJAss1MBT5BINRgrFZ4_IxInlx-wIduZFj85mLVF5WNpgpXYAowcKULS63s=w150'/> </div> <h2>Protected Content</h2> <p>Please enter the passcode to unlock the content.</p> <div class='input-group'> <input id='pass' name='pass' placeholder='Enter passcode' required='required' type='password'/> <button type='submit'>Unlock</button> </div> <p class='contact-text'>Contact Adzril for the passcode.</p> <p id='errorMessage'/> </form> </div> <style> #passDiv { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f7f7f7; z-index: 9999; display: none; justify-content: center; align-items: center; } #passDiv form { background-color: #ffffff; padding: 40px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); text-align: center; max-width: 400px; width: 100%; } .logo { margin-bottom: 30px; } .logo img { max-width: 150px; height: auto; } #passDiv h2 { font-size: 28px; margin-bottom: 20px; color: #333333; } #passDiv p { font-size: 18px; margin-bottom: 30px; color: #666666; } .input-group { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } .input-group input { padding: 12px; border: 1px solid #dddddd; border-radius: 6px; font-size: 18px; width: 100%; max-width: 300px; } .input-group button { padding: 12px 24px; background-color: #ff6b6b; color: #ffffff; border: none; border-radius: 6px; font-size: 18px; margin-left: 15px; cursor: pointer; transition: background-color 0.3s ease; } .input-group button:hover { background-color: #ff4f4f; } .contact-text { font-size: 16px; color: #999999; margin-bottom: 10px; } #errorMessage { color: #ff6b6b; font-size: 16px; margin-top: 15px; } </style>
Paparan lebih simple. Dengan passcode ini user tak boleh akses blog anda. Kalau dia ada passcodenya, dia boleh akses blog anda dalam 1 jam je. lepas tu akan lock balik.
Letak code ini dalam tag body. Atau sebelum </body>
Ini untuk paparan passcode yang lebih minimalist.
<script>
// Define the passcode and access duration
var passcode = "a";
var accessDuration = 60 * 60 * 1000; // 1 hour in milliseconds
// Function to handle passcode check
function passCheck() {
// Get the entered passcode and error message element
var enteredPasscode = document.getElementById('pass').value;
var errorMessage = document.getElementById('errorMessage');
// Check if the entered passcode is correct
if (enteredPasscode === passcode) {
// Calculate the expiration time
var expirationTime = new Date().getTime() + accessDuration;
// Store the passcode and expiration time in local storage
localStorage.setItem('passcode', enteredPasscode);
localStorage.setItem('expirationTime', expirationTime);
// Hide the passcode input div and set the body's overflow to auto
document.getElementById('passDiv').style.display = 'none';
document.getElementsByTagName('body')[0].style.overflow = 'auto';
// Clear the error message
errorMessage.textContent = '';
} else {
// Set the error message
errorMessage.textContent = 'Invalid passcode. Please try again.';
}
// Prevent the form from submitting
return false;
}
// Function to handle page load
window.onload = function() {
// Get the stored passcode and expiration time from local storage
var storedPasscode = localStorage.getItem('passcode');
var expirationTime = localStorage.getItem('expirationTime');
var currentTime = new Date().getTime();
// Check if the stored passcode is valid or if the expiration time has passed
if (storedPasscode !== passcode || currentTime > expirationTime) {
// Remove the stored passcode and expiration time from local storage
localStorage.removeItem('passcode');
localStorage.removeItem('expirationTime');
// Display the passcode input div and set the body's overflow to hidden
document.getElementById('passDiv').style.display = 'flex';
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
};
</script>
<div id='passDiv'>
<form onsubmit='return passCheck()'>
<div class='logo-container'>
<img alt='Logo' src='path/to/your/logo.png'/>
</div>
<label for='pass'>Enter Passcode:</label>
<input id='pass' name='pass' type='password'/>
<input type='submit' value='Submit'/>
<p>Please contact Adzril to get the passcode.</p>
<p id='errorMessage' style='color: red;'/>
</form>
</div>
<style>
#passDiv {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
display: none;
justify-content: center;
align-items: center;
}
#passDiv form {
background-color: #f1f1f1;
padding: 20px;
border-radius: 5px;
text-align: center;
}
.logo-container {
text-align: center;
margin-bottom: 20px;
}
.logo-container img {
width: 200px;
height: 200px;
}
</style>