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 .
