How to use CSS to display rating stars in Blogger, Blogspot

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Rating stars are widely used in Blogger blog posts. Everyone will be Reviewing some or the other things using Blogger. But I have never come across any of the posts which will describe how to use CSS to display rating stars in Blogger. Hence, I am writing this post to describe how to display rating stars in Blogger.

Rating stars are star like images that indicates the rating of an item. The more stars, the better is the product. Usually we find a scale of 0 to 5 stars, and most often these are in increments of half-stars of even full-stars only.

In this tutorial we’ll discuss how we can "use CSS to display the stars" in a very elegant manner. It even allows to show any rating very clearly, so you’d be able to distinguish a rating of 3.8 from a rating of 4.2!

5 star rating system in action:

Before starting, lets have a look here at this system in action. Look at the reviews posted for Bollywood Movies on this posts. We have inserted Star rating after describing each reviews.

How to use it in Blogger Template:

The stars are constructed out of only two images. A bright , and a faint star: .

The html for these stars is very simple – one DIV inside another:

 
<div class="rating_bar">
  <div style="width:51%"></div>
</div>

The style attribute for the inner DIV is what determines how many stars are displayed. A rating of 100% corresponds to 5 full stars. A rating of 40% corresponds to 2 stars, a rating of 42% corresponds to a little more than 2 stars, and so on.

So, you have to use above code in your blog posts as it is. But remember you should not write this on different lines, else Blogger blog post will show Bright and fainted images on different lines.

The class on the outer DIV allows us to apply CSS. The CSS used is as follows:

.rating_bar {
  width: 55px;
  background: url(/img/star_x_grey.gif) 0 0 repeat-x;
}

.rating_bar div {
  height: 12px;
  background: url(/img/star_x_orange.gif) 0 0 repeat-x;
}

1. To place this code, Goto Design -> Edit HTML -> Expand Widget Template.
2. Backup your template.
3. Search for <style>
4. Place above code before this tag.

The first rule-set applies to the outer DIV. It defines the width for the entire set of stars. The width determines how many stars will be visible. In our case, we have stars that are 11 pixels wide and we want 5 of them – hence 55 pixels wide. The faint star image is set as the background image.

The second rule-set applies to the inner DIV. The height needs to be the height of your star image. The bright star image is set as the background image.

This all combines to create our example:


You can think of it as two layered boxes. The lower one is filled with the faint stars and takes up the entire width. The upper one contains the bright stars and it’s width is what conveys the bar’s meaning.

Did this tutorial solved your problem? Is it Pretty simple? Write in your comments to keep this blog alive and share your experiences too.

You can ask your questions in Comments.

Posted in: How-Tos