Affiliate Links Notice

This website uses affiliate links as a means of generating revenue.

However, we do not recommend products and services that we believe will not be of interest to you.

We make it a point to recommend products and services that we like, and express our honest opinions about them regardless of an affiliate relationship with the products, goods, and services being recommended.

Balkeni Studio is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com, Inc or its affiliates.

To know more about the use of affiliate links on this website please read our terms and conditions.

How To Add A Star Rating Widget To Your Blogger Blog

Published on: Monday, 17 February 2020 ✦ Updated on: 2020-02-17T14:16:48Z

how to make a star rating widget in blogger blog posts


I have been dedicated to the blogger platform for years now. It is my blogging platform of choice, and I love that it is extremely customisable. It is a very popular myth that blogger is not a customisable platform, it's not true. And for 4 years now, I've been helping bloggers make the most of their blogger blogs.

I know a lot of lifestyle, DIY, fashion bloggers review products and so I often got requests from bloggers on helping them with a star rating widget.

Are you a blogger on the blogger platform and you do reviews?

Then you'll be happy to know that this star rating widget will help your blogger blog stand out from other generic blogs. Now let's get into it.


star rating tutorial for blogger blog

Even if you weren't a blogger who often does reviews, you might find unexpected ways to make use of this simple yet beautiful star rating widget in your blog. Let's get right into it.

01. Save The HTML Code in your own computer


Go ahead and save the HTML Code somewhere in your computer or book mark this post in your browser, or pin it to read it later and go back to it when needed. I like to use Evernote to save all my blog codes and embed webpages, you may also use Trello to do so if you wish.


<div class="rating">
<div class="rtxt">
My Rating:
</div>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>


02. Add The CSS Code in your blog template



  1. Log in to your blogger blog, the click on Theme.
  2. Then click on Customise.
  3. Scroll down to where you see the option Add CSS.
  4. Copy and paste the code below
  5. Click Apply to Blog.
  6. Then click Go back to blogger.


.checked { color: #54c5d0; } .rtxt{ display: inline-block; text-transform: uppercase; padding: 0 5px; }

Congratulations, you have now completed all the steps required in setting up the widget. Now, you'll need to understand how to use this widget in your blog posts.

Every time you need to display the star ratings in a blog post you'll need to copy and paste the HTML code provided to you in the beginning of this post to wherever you want that ratings to display.

By default, this rating widget shows three star rating, you can easily customise this by changing the code by just adding the word "checked" in the code for every star you would like to show. For example: You can show a 4 star rating using this code, notice how this is the same HTML Code as before but with an extra "checked" added.

For your ease I've added bolded the extra word added:


<div class="rating">
<div class="rtxt">
My Rating:
</div>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>



Similarly, you can add five stars, and remove the word checked from the code to show less amount of stars.

Once you've added in the codes properly you can adjust the colours of the stars by changing the values of:

.checked { color: #54c5d0; }

This value affects the colours, you can easily look up the colours using the colour picker and and match them with your theme.

Live Demo


My Rating:


You can hire me to add this to your blog if you feel it's too complicated and you don't wish to DIY it.

I hope you've enjoyed this tutorial, and it helps you extend the capabilities of your blogger blog! As always you can send in a request for a tutorial or blog post, and if this blog post has helped you, please consider subscribing to all my future blog posts or follow my blog.



If there's anything else, please let me know. I enjoy writing tutorials for you guys as always. Please consider donating to help me keep the blog up and running smoothly if it resonates with you.

Post a Comment