Add Star Ratings to your Blogger Blog

Blogger in draft support new Star Ratings feature, blog readers can hit rate easily of your post. To enable star ratings, login to
http://draft.blogger.com/ dashboard and go to blog layout page. Click "Edit" botton at Page Elements and selected the "Show Star Ratings".

Modify Blog Template

After enable new Star Rating feature, we must add few code to show star rating where you want.

1.decide a place to show star ratings. For example, to show star ratings in every post footer. Choice one of three paragraph

<div class='post-footer'>
 <p class='post-footer-line post-footer-line-1'></p>
 <p class='post-footer-line post-footer-line-2'></p>
 <p class='post-footer-line post-footer-line-3'></p>
</div>

2.Add following section of codes

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- Add above code, show star rating at single post view, if you don't.
    delete it and don't forget </b> tag -->
    <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>

3.Find this line in your template and add following section of code just after this line

<b:include name='nextprev' />
<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>

4.you done! Now, after save template and try it.