Star Rating widget For Blogger Posts

Star Rating widget For Blogger Posts one of the beautiful widget to rate the post. Now its very easy to add star rating widget below each blogger posts.

If you wanna add star rating widget like below to your blog, Just login to your blogger with draft.blogger.com instead of blogger.com.

LAYOUT > Page Elements > Edit Post Box > Select There Rating Widget > SAVE


Now View your Blog , you will see the rating widget below every post.


This will only work if you are using uncustomized blogger template by google.


If you are using customized template or third party template on blogger. Then add these few codes to your blogger html.

Layout > Edit Html > Ctrl + F 

Now,
Search For <data:post.body />
Now Follow this path:-

Add below codes Just after this green line 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='star-ratings'>
<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>
</span>
</b:if>

Now Find This Line <b:include name='nextprev'/> 


Add Below codes just after it

<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.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Now Save Your Template. Its Done View Your Blog.

A Beautiful Post Rating widget is now added below your each post of blogger.