How to add Exclusive Post feature in Blogger using Firebase Auth

Having exclusive posts on your website is a great way to engage your audience and give value to your readers. The Blogger doesn't have an inbuilt exclusive post feature however we can add it to your website with the help of Firebase Authentication. This will be useful to those who are trying to produce members-only viewable posts on their Blogger website.This will restrict access for those who are trying to view exclusive posts without login but Users who have logged to your website can access posts normally.

Firebase Authentication allow you to manage user login. By adding Firebase Authentication in your website you can make sure that your website's exclusive posts are only available for logged users in your website. This not only improve user engagement but also allow you to create a personalized experience for your readers.

In this tutorial we will show you how to add exclusive posts to your Blogger website. The Firebase Authentication integration is already explained in a previous article the link to the previous article is given below. So without wasting much time let's see how to implement it in your Blogger site.

Exclusive post feature implementation process

Firebase settings and Firebase implementation

To know how to set up Firebase and add Firebase Authentication on your Blogger website please go to our previous post.

Previous post link: Click here

Exclusive post feature in your website

1. First of all, Go to your Blogger dashboard
2. Click on "Posts" in the sidebar
3. Create or choose a post to add exclusive content
4. Switch to "HTML view"
5. Paste the following code

<style>
  /* Message (www.incrediblegad.in) */
  .IGMsg {
    background: #f0edff;
    color: #1c02a1;
    padding: 20px;
    border-radius: 20px;
  }

  /* Message Button (IncredibleGad) */
  .IGMsg button {
    background: #360ff7;
    color: #ffffff;
    padding: 8px;
    border-radius: 30px;
    text-align: center;
    width: 100%;
    margin-top: 8px;
  }

  .IGMsg h3 {
    color: #1c02a1;
  }
</style>

<!-- [Exclusive Content (IncredibleGad)] -->

<div id="exclusive-content" style="display: none;">
  <p>Hello World!</p>
</div>

<div id="login-message">
  <div class="IGMsg">
    <h3>Exclusive Content</h3>
    <p>This post is only available for Logged users. Please Login to view this content.</p>
    <a href="/p/login.html">
      <button>Login</button>
    </a>
  </div>
</div>

<script type="deferjs">
  /* Exclusive Content JS | www.incrediblegad.in | 8 February 2025 */
  auth.onAuthStateChanged(e => {
    document.getElementById("exclusive-content").style.display = e ? "block" : "none";
    document.getElementById("login-message").style.display = e ? "none" : "block";
  });
</script>

Don't forget to replace <p>Hello World!</p> with your exclusive content and if there is change in your login page path then replace /p/login.html with your login page path. You can also add content that show for everyone by adding your content before <div id="exclusive-content" style="display:none;">

Conclusion

Adding an exclusive post feature to your Blogger website using Firebase is a great way because it ensures the security of users and easy account management. The CSS, HTML and Javascript mixed code provided in this article ensure users with valid credentials can only access the post. This improves user engagement and encourages users to sign up or log in to your website.

Using Firebase Authentication you can implement a login system in your Blogger website with Email/Password and Google sign-in authentication. We discussed it in a previous article. In that article, we discussed setting up Firebase, implementation of Firebase auth in the Blogger website and page creation.

After following this tutorial carefully, you can ensure fully working exclusive post feature on your Blogger website. If you have any doubt related to this tutorial then please feel free to comment below. Don't forget to share with those friends who are looking for a tutorial to add an exclusive post feature on their Blogger website.