Add Star Ratings to your Blogger posts

A simple Tutorial explaining how to add a five star post rating system to your Blogger blog with almost no coding skills required.

Post rating system on a website allows readers to rate the content on a certain scale. Ratings thus obtained are considered proportional to the visitor’s / reader’s satisfaction.

You may also call the rating system a polling system that help you and your readers to receive and send feedback on content.

You might have already seen post ratings feature on review websites, photo galleries, and food recipe blogs. These kind of projects make use of server-side scripts and database to save and show rating data.

Lets talk about our beloved Blogger platform. Blogger doesn’t provide any rating widgets officially. Also, it doesn’t allow its users to add server-side customizations. So Blogger users have to rely on client-side alternatives or third-party solutions to add star ratings and similar utilities on their blogs.

Note: A client-side solution alone (eg. a jQuery plugin) will not work here, as we also need a database to save and retrieve our rating data.

Previously, a popular service was providing free rating widget for Blogger – it still does but the widget is not working anymore (so there is no use to mention it). But don’t worry, I know one more.

Here's a very simple method that allows you to easily add ratings widget to your Blogger blog with a few lines of code. So, without waiting anymore, you should follow the below given steps to get this task done:

First off, Edit HTML of your blogger template, find

and add the following code just above it:

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>

2.Now head over to graddit.com and select a rating widget first.

3.Click the “Blogger” link on the top to get the widget code. Optionally, you may also opt-in the jQuery functionality for animation effects. Copy the code so generated:

code placing for five star rating widget

4.Now, again come to the HTML of your Blogger template and look the code below↓↓

<b:includable id='post' var='post'>

5.Find underneath the above line and paste the star rating code just above (if you want rating widget to appear at the top of post content) / below (if you want it below the post) it

6. I'm happy to announce to you that you're done. Save the changes.

That’s it. Now open any of your posts to check if you’ve successfully added ratings or not.

Note: Additionally, you may signup for an account there at Graddit.com for more features.