How to add Blogger Star Ratings to a customized template

Star Ratings has been added to Blogger in Draft. If you have customized the template you might find that the Star Ratings does not show up on your blog.

Go to Blogger in Draft>Layout>'Edit HTML' and select 'Expand widget templates'.

Search for this row:

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

Replace it with the following:

<div class='post-footer-line post-footer-line-3'><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> </div>

Search for something like this:

<b:widget id='Blog1'

Now continue searching for the end of this widget:

</b:widget>

You will find two rows like these:

</b:includable>
</b:widget>

Before these two rows the following should be placed

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

Preview to make sure it works. If you are unsure make a backup before you save it.