Custom Blogger Admin Dashboard Template with Firebase

Table of Contents

This post will guide you on how to transform the default Blogspot interface into a professional Admin Dashboard. The system uses Firebase for login management, ensuring only authorized users can access the data.

Step 1: Install the Interface

1. Access: Go to Blogger.com > Theme. 
2. Edit HTML: Click the arrow next to "Customize" > Select Edit HTML.
3. Download: Obtain the AdminLTE Blogspot Template.xml file.
4. Replace Code: Select all existing code (Ctrl+A), delete it, and paste the content of the XML file you downloaded.
5. Save: Click the Save icon to apply the theme.

Step 2: Firebase Backend Setup

Create Project

Note If you have already an existing Firebase Project created earlier, you can use it and skip the steps for creating newer one which is described below.

Visit Firebase Console, create a new project, and register a Web App (</>) to receive your firebaseConfig credentials.

Firebase Configuration

Getting Firebase Configurations

We now need the configuration object of our Firebase Project Web app. Follow the steps to find it.

1. Navigate to your Firebase Project.
2. Go to Project Settings.
3. Under General > Your apps tab, select your Web app and click on Config. You will be able to see a Javascript object which looks like the following:

   const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
     authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
     databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
     projectId: "xxxxxxxxxxxxx",
     storageBucket: "xxxxxxxxxxxxx.appspot.com",
     messagingSenderId: "000000000000",
     appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
     measurementId: "G-XXXXXXXXXX",
   };

Keep the browser tab open as we shall need the information of this object.

Enable Authentication

Navigate to Build > Authentication > Sign-in method. You MUST enable Email/Password.

Important!
Ensure Email/Password is enabled, otherwise, the Login/Register features will fail.

Firebase Auth Blogger

Apply Firestore Security Rules

To prevent unauthorized users from editing your data, you must apply Firestore Security Rules (v2). This logic ensures only users with the admin role can modify the database.

Firestore Security Rules

Go to Build > Firestore Database > Create Database (Test Selection Mode). Then, switch to the Rules tab and paste the following security code:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Admin check: Only users with 'admin' role in /users/{uid}
    function isAdmin() {
      return request.auth != null && 
             get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == 'admin';
    }

    match /users/{userId} {
      allow read: if request.auth != null && (request.auth.uid == userId || isAdmin());
      allow create: if request.auth != null && 
                    request.auth.uid == userId &&
                    request.resource.data.status == 'pending' &&
                    request.resource.data.role == 'user';
      allow update, delete: if isAdmin();
    }
  }
}

Step 3: Connect Firebase to Blogger

Go back to Blogger HTML editor, find the code below, and update your project credentials:

// Firebase Initialization
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT.appspot.com",
    messagingSenderId: "YOUR_ID",
    appId: "YOUR_APP_ID"
};

Step 4: Admin Approval Workflow

User Sign-up: Users register accounts. By default, they are locked in pending statu

Manual Approval: You (The Super Admin) must go to Firestore > Collection users, find the user document, and change status to active and role to admin.

Deployment: Once approved, the user gains full access to the dashboard features.

Firebase Authentication Blogger

Why do I get an access error after login?

You need to go to Firestore, find that account's UID, and add the status field with the value active.

By combining Blogger's free hosting with Firebase's user management, you now have a powerful Dashboard with zero monthly operating costs.