compycom

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.

Now Follow this path:-

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

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

see example in this blog - http://www.mixtaka.com

If you are using customized template or third party template on blogger. Then add these few codes to your blogger html. (but first save your previous template, before doing this hack, in case there is something wrong you can get back your template easily, )

Layout > Edit Html > Ctrl + F

Now, Search For <data:post.body />

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.