Add Star Ratings to Blogger posts

This was one of the mistakenly added feature around a month ago when the Blogger team did not intend to sneak it out. But now Blogger has added Star Ratings for each of your blog posts and you can use them at your blogs. The basic reason to add this feature beneath your blog posts is to show the popularity of the post.

This was one of the features added by Blogger in its 26 June updates, and is also available through blogger in draft. The rating system consists of two parts one part displays the average ratings of the post till now and the second one has the feature through which you can add your rating. Try it an the bottom of this post :)

How To Install Star Rating System For Blogger:

For Default Template Users:
The Installation is pretty simple for those who use the default templates of Blogger.Just follow these instructions to get it working.
> Log in to Blogger in Draft
> Go to Layouts > Page Elements (it is default when you open Layouts tab)
> Click on the 'Edit' Button for the 'blog post' page element
> Select the Show Star Rating box, and align it where you want to place it, using the arrange items preview.
> Save and You are done :)
That was a breeze, Isn't it?

But there can be a problem if you are using Custom templates, wherein the Star ratings won't show at all? But not to worry.

IF YOU ARE USING CUSTOM BLOGGER TEMPLATES:

> Perform the above steps.
> Go to Layouts > Edit HTML, and expand widget templates.
> Search for this code : <data:post.body/>
Below this search for <div class='postinfo'>
Paste this code just below the above found code :

<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if> </div>

> Now search for this code: <b:include name='feedLinks'/>
Place this Code just below the above found code:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

The code should look somewhat like this:
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>

> Save the template and you are done :)

You have the Star Ratings enabled for your blog now. You can Rate this post too below. If you have any queries feel free to ask.

You May also check out - How to add Inline Comment Form to Blogger

Do Comment and To keep yourself updated about Technology Subscribe to our feed