Blogger Plugins

How to Add a Star Rating System to Blogger (5-Star Widget)

NiaDzgn.blogspot.com by NiaDzgn.blogspot.com

Star Rating Widget for Blogger – Add a 5-Star Review System

Hello everyone! In this guide, I’ll show you how to add a modern star rating system to Blogger that allows users to rate your posts only once.

If you want a clean, lightweight, and spam-free rating solution, this widget is a perfect choice. It uses Firebase Realtime Database to store ratings securely and update them in real time.

This widget is specially designed for Blogger / Blogspot and works smoothly on both desktop and mobile devices.

Star Rating Widget for Blogger

⭐ Key Features

  1. Modern 5-star SVG rating design.
  2. Fully responsive on mobile and desktop.
  3. Powered by Firebase Realtime Database.
  4. Users can rate only one time.
  5. Prevents spam even if users:
    • Clear browser cache
    • Use incognito mode
    • Refresh the page
  6. Automatically shows previous rating.
  7. Displays average rating and total votes.

This widget can be displayed on all posts or selected pages using Blogger conditions.

🔧 Step 1: Create Firebase Realtime Database

{
  "rules": {
    ".read": true,
    "ghRatings": {
      "$blog_id": {
        "$post_id": {
          ".read": true,
          ".write": "newData.hasChildren(['sum', 'count', 'fingerprints']) && newData.child('sum').isNumber() && newData.child('count').isNumber() && newData.child('fingerprints').hasChildren()"
        }
      }
    }
  }
}

Before installing the widget, make sure you have a Firebase Realtime Database ready.

Add proper read/write rules so ratings can be stored securely.

If you’re new to Firebase, follow a complete guide on setting database permissions.

🎨 Step 2: Add CSS Code

Go to Blogger Dashboard → Theme → Edit HTML
Find: 

]]></b:skin>

or

]]>*/</style>

Paste the CSS code above it. (CSS remains unchanged)

/* Star rating by niadzgn.blogspot.com */
.ghRating-section{display:flex;margin-top:25px;padding-top:25px;width:100%;align-items:center}
.rating-area{width:40%;border-right:1px solid #eee;text-align:center;padding-right:20px}
.average-rating{font-size:18px;font-weight:600;margin-bottom:10px}
#avgScore{font-size:30px;font-weight:700}
#avgScore + small{font-size:18px;font-weight:normal}
.stars-average{display:flex;gap:5px;justify-content:center;margin-top:3px;margin-bottom:3px}
.stars-average svg{width:30px;height:30px;cursor:pointer}
.rating-divided{width:60%;margin-left:30px}
.rating-progress{display:flex;align-items:center;margin:3px 0}
.rating-grade{width:50px;font-size:16px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;position:relative}
.rating-grade::after{content:'';display:inline-block;width:16px;height:16px;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNlMGFjMzMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIC41ODdsMy42NjggNy40MzFMMjQgOS40MjNsLTYgNS44NDkgMS40MTcgOC4yNjhMMTIgMTguODk3IDQuNTgzIDIzLjU0IDYgMTUuMjcyIDAgOS40MjNsOC4zMzItMS40MDV6Ii8+PC9zdmc+");background-size:contain;background-repeat:no-repeat;margin-left:4px;vertical-align:middle}
.progress{background:#e9ecef;width:100%;height:1rem;overflow:hidden;position:relative;margin-right:10px;border-radius:10px}
.progress-bar{background:#e0ac33;height:100%;transition:width 0.6s;border-radius:10px}
.rating-count-detail{font-size:12px;white-space:nowrap;width:80px}
.rating-count-detail .votes{font-weight:bold}
.hidden{display:none!important}
.total-rating,.rated-caption{font-size:16px;margin-top:10px}
@media (max-width:680px){.ghRating-section{flex-direction:column}.rating-area{border-bottom:1px solid #eee;border-right:unset;margin:0 0 15px;padding:0 0 15px;width:100%}.rating-divided{width:100%}}

🧩 Step 3: Add HTML Structure

Paste the rating HTML code just below:

<data:post.body/>

Median UI 1.7 users:

<b:include data='post' name='postBody'/>

(HTML remains unchanged)

 <b:if cond='data:view.isPost'> 
                <!-- Star Rating by niadzgn -->
<div class='ghRating-section'>
  <div class='rating-area'>
    <div class='average-rating'>
      <span id='avgScore'>0.0</span><small>/5</small>
      <div class='stars-average' id='starsAverage'>
      </div>
    </div>
    <div class='total-rating'><span class='total'>0</span> ratings</div>
    <div class='rated-caption hidden'><p>Thank you for your rating!</p></div>
  </div>
  <div class='rating-divided'>
    <div class='rating-progress' data-rate='5' data-text='0'>
      <span class='rating-grade'>5</span>
      <div class='progress'><div class='progress-bar'/></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
    <div class='rating-progress' data-rate='4' data-text='0'>
      <span class='rating-grade'>4</span>
      <div class='progress'><div class='progress-bar'/></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
    <div class='rating-progress' data-rate='3' data-text='0'>
      <span class='rating-grade'>3</span>
      <div class='progress'><div class='progress-bar'/></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
    <div class='rating-progress' data-rate='2' data-text='0'>
      <span class='rating-grade'>2</span>
      <div class='progress'><div class='progress-bar'/></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
    <div class='rating-progress' data-rate='1' data-text='0'>
      <span class='rating-grade'>1</span>
      <div class='progress'><div class='progress-bar'/></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
  </div>
</div>
        </b:if>

⚙️ Step 4: Add JavaScript Code

Add the following JavaScript code just before the closing </body> tag.

<b:if cond='data:view.isPost'> 
  <script>
/*<![CDATA[*/
var ghRatings = {
  firebaseUrl: 'https://ratings-64080-default-rtdb.firebaseio.com/',
  sharedBy: 'niadzgn.blogspot.com' // Credit do not removed
};

function ratingLoad(){var script=document.createElement('script');script.async=true;script.src='https://cdn.jsdelivr.net/gh/niadzgncom/blog@main/Ratings.js';document.body.appendChild(script)}(function(){if(localStorage.getItem("RatingsJs")!=="true"){let t=false;window.addEventListener("scroll",()=>{if(!t){ratingLoad();localStorage.setItem("RatingsJs","true");t=true}},true);window.addEventListener("click",()=>{if(!t){ratingLoad();localStorage.setItem("RatingsJs","true");t=true}},true)}else ratingLoad()})();
/*]]>*/
</script></b:if>
Important:
Replace firebaseUrl with your own Firebase Realtime Database URL.

✅ Final Step

Save your theme and open any post on your blog. Scroll down and test the star rating widget.

🎉 Your Star Rating System for Blogger is now live!

This tutorial is written in original wording and is completely safe for SEO and Adsense. If you face any issues or want extra customization, feel free to comment below.

Happy Blogging 🚀

Tags:
Share this Article
Avatar photo
By NiaDzgn.blogspot.com Admin
niadzgn Themes - Best Free and Premium Blogger Templates 2025. We Create Professional, High Quality, SEO Optimized and Fastest Responsive Blogger Templates.
Post a Comment