How to Lock a Specific Article or Page by Password on Blogger

Hello everyone! I hope you are all doing well. Welcome back to another article on the Freemium Tech website. Today, we will discuss how to lock a specific article or page with a password on Blogger. If you need to protect any content or page on your website, this guide is for you.

What is Content Locking on Blogger?

Protecting a page or blog post is necessary in several situations, ensuring that only authorized users can access specific content. This method is incredibly useful if you want to restrict article or page access to premium customers or paid members.

The Challenge: If your website is built on WordPress, locking content is easy thanks to the built-in "Status & Visibility" feature. However, Blogger does not natively offer this function.

How to Lock Content on Blogger?

Even though Blogger lacks a native visibility feature, you can manually lock content by using a simple JavaScript snippet within the specific post you want to protect. Follow the step-by-step tutorial below to secure your pages.

Benefits of Locking Blogger Content

• Enhanced Privacy: Protect sensitive content or personal documents securely.
• Monetization & Exclusivity: Reserve specialized content exclusively for registered or paid members.
• Controlled Access: Easily manage who views your digital assets.

See The Script Live

Step-by-Step Guide: Locking Specific Posts or Pages

Step 1: Switch to HTML View

Log in to your Blogger Dashboard, navigate to Posts (or Pages), and open the content you want to lock. Click the pencil icon in the top-left corner and switch to HTML View.

Step 2: Insert the JavaScript Code

Copy the code snippet below and paste it at the very top of your HTML editor:

<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function() {
    // ১. সিএসএস স্টাইল (ডিজাইন, রেসপন্সিভ এবং অ্যানিমেশন) সরাসরি স্ক্রিপ্ট দিয়ে ইনজেক্ট করা হচ্ছে
    var css = `
        .custom-modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(5px);
            display: flex; align-items: center; justify-content: center; z-index: 99999;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .custom-modal-box {
            background: #ffffff; padding: 30px; border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3); width: 90%; max-width: 400px;
            text-align: center; box-sizing: border-box; transition: all 0.3s ease;
        }
        .custom-modal-box h3 { margin-top: 0; color: #333; font-size: 22px; margin-bottom: 15px; }
        .custom-modal-box input[type="password"] {
            width: 100%; padding: 12px; margin-bottom: 15px; border: 2px solid #ddd;
            border-radius: 8px; font-size: 16px; box-sizing: border-box; transition: border-color 0.3s;
        }
        .custom-modal-box input[type="password"]:focus { border-color: #4CAF50; outline: none; }
        .custom-modal-box button {
            background: #4CAF50; color: white; border: none; padding: 12px 25px;
            font-size: 16px; border-radius: 8px; cursor: pointer; width: 100%;
            font-weight: bold; transition: background 0.2s;
        }
        .custom-modal-box button:hover { background: #45a049; }
        .error-msg { color: #ff3838; font-size: 14px; margin-top: 10px; display: none; font-weight: 500; }
        
        /* ভুল পাসওয়ার্ডের ঝাঁকুনি (Shake) অ্যানিমেশন */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-10px); }
            40%, 80% { transform: translateX(10px); }
        }
        .shake-anime { animation: shake 0.4s ease-in-out; border: 2px solid #ff3838 !important; }
    `;
    
    var styleNode = document.createElement('style');
    styleNode.type = 'text/css';
    styleNode.appendChild(document.createTextNode(css));
    document.head.appendChild(styleNode);

    // ২. মডাল/পপ-আপ এর এইচটিএমএল তৈরি
    var modalHTML = `
        <div class="custom-modal-overlay" id="pwdModal">
            <div class="custom-modal-box" id="modalBox">
                <h3>🔒 Enter Password</h3>
                <p style="color: #666; font-size: 14px; margin-bottom: 20px;">Please enter the password to enter this post</p>
                <input type="password" id="passInput" placeholder="Enter password here...">
                <button id="submitPassBtn">Submit</button>
                <div class="error-msg" id="errorMsg">❌ Wrong password! Try again.</div>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', modalHTML);

    // ৩. পাসওয়ার্ড চেক করার লজিক ও অ্যানিমেশন কন্ট্রোল
    var correctPass = 'itstamim';
    var redirectURL = 'POST-PAGE-URL'; // ভুল হলে যেখানে পাঠাতে চান (বা হোমপেজ লিংক)

    var modalBox = document.getElementById('modalBox');
    var passInput = document.getElementById('passInput');
    var submitBtn = document.getElementById('submitPassBtn');
    var errorMsg = document.getElementById('errorMsg');

    // ইনপুটে ফোকাস করা
    passInput.focus();

    function checkPassword() {
        var enteredPass = passInput.value;
        
        if (enteredPass === correctPass) {
            // সঠিক পাসওয়ার্ড হলে গ্রিন থিম ও পপ-আপ গায়েব হবে
            passInput.style.borderColor = "#4CAF50";
            submitBtn.style.background = "#4CAF50";
            submitBtn.innerText = "Success! Opening...";
            setTimeout(function() {
                document.getElementById('pwdModal').remove();
            }, 800);
        } else {
            // ভুল পাসওয়ার্ড হলে লাল হবে, ঝাঁকুনি (Shake) দেবে এবং এরর মেসেজ আসবে
            modalBox.classList.add('shake-anime');
            passInput.style.borderColor = "#ff3838";
            errorMsg.style.display = "block";
            
            // অ্যানিমেশন রিসেট করার জন্য
            setTimeout(function() {
                modalBox.classList.remove('shake-anime');
            }, 400);

            // আপনি যদি চান ভুল পাসওয়ার্ড দিলে সাথে সাথে অন্য পেজে রিডাইরেক্ট করে দেবে (আপনার আগের কোডের মতো):
            // নিচে থেকে ডাবল স্ল্যাশ (//) মুছে দিলে রিডাইরেক্ট একটিভ হবে। 
            // location.href = redirectURL;
        }
    }

    // বাটনে ক্লিক করলে চেক হবে
    submitBtn.addEventListener('click', checkPassword);

    // এন্টার (Enter) কি চাপলেও চেক হবে
    passInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            checkPassword();
        }
    });
});
</script>

Note: Replace itstamim with your desired password, and replace POST-PAGE-URL with your actual blog or post URL where users should be redirected if they type the wrong password.

Step 3: Save and Update

Click Update or Publish to apply the changes. Test your live link to ensure the password prompt triggers correctly.

Conclusion

While Blogger doesn't have a built-in privacy toggle, this JavaScript workaround gets the job done seamlessly. If you found this tutorial helpful, please share it with your friends and subscribe to our blog for more tech tips!