How to Add a Star Rating System to Blogger (5-Star Widget)
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.
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.
_NIADZGN.png "Star Rating Widget for Blogger")
⭐ Key Features
- Modern 5-star SVG rating design.
- Fully responsive on mobile and desktop.
- Powered by Firebase Realtime Database.
- Users can rate only one time.
- Prevents spam even if users:
- Clear browser cache
- Use incognito mode
- Refresh the page
- Automatically shows previous rating.
- 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>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 🚀
CONCLUSION
In this article, I shared with you How to Add a Star Rating System to Blogger (5-Star Widget). I hope you found it helpful and informative. Please share it with your friends and follow our blog for more updates.
If you face any problems in demo, download, or have any questions, feel free to ask me in the comments section or join our Telegram Channel to get the latest posts and updates daily.
Note: All posts shared here are only for educational and informational purposes. We respect the rights of original creators. If you are the content owner and have any concerns, please contact us for review.
_NIADZGN.png&description=How to Add a Star Rating System to Blogger (5-Star Widget)){kind=link}