How to add Star-rating to Custom Blogger Templates

Blogger in draft recently launched couple of updates, fixes and two most sought features to Blogger in draft:

• Embedding Comment form in each post.
• Adding Star rating to individual posts.

To read about the complete list of updates and fixes, read this post on Blogger in draft blog.

Now to embed comment form for custom blogger themes and modified templates, Amanda on Blogger Buster has written an excellent how to.
To add Star rating to these kind of custom theme enabled blogs, I couldn't find any trick.  But I sort of played with the code and came up with a solution which should work with any custom built blogger template. 

Step 1:  Backup your existing template.  I assume you know it very well so I am not gonna explain it again.
Step 2:  Expand widget templates and copy the entire code some where in Notepad or something.  In case something goes wrong, you have the entire widget code.
*Step 3:  Go to 'Layouts' and under 'Blog post' widget, select Star rating.  And save the changes.

*Step 4:  Go to 'Edit HTML' and select 'Expand widget templates'.
Step 5:  Search for this line of code:

<p><data:post.body/></p>

Step 6:  Copy the following code right after the above line of code:

<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>

Step 7:  Now again search for following code:

<b:include name='feedLinks'/>

This line you may find several times, so make sure you seek for the last instance at the bottom of the code which should ideally be before the start of sidebar codes.  So when you see this line, it should look something like:

<b:include name='feedLinks'/>
  </div>
            </div>
        <div class='cont-bottom'/>
        </div>
        </div>
        </div>
 </b:includable>
</b:widget>
</b:section>
....
....
<div id='sidebars'>

Step 8:  Copy the following code right after the line mentioned above: 

<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>

Step 9:  Preview your changes without saving it.  You should see the star rating in each post on your blog posts on the main page itself.
Step 10:  That's it, save your template if satisfied and enjoy the Star ratings on your blog.

Also let me know if this post helped you in customising your template by dropping a comment here or at least leaving your rating.

*Update :  Added Steps 3 & 4.  Added image for clarity.