How to Add Star Rating to Your Blogger Post

Star ratings is a new feature currently available through Blogger in Draft. This enables you to add a widget beneath your posts which readers can use to rate your articles on a scale of 1-5, like this:

If you use a default Blogger template, you should be able to activate this feature right away when logged through Blogger in Draft: simply go to Layout>Page Elements and edit the "Blog Posts" widget to activate the display.

However, those using a customized or third party template will need to add the required code to their templates first. In this tutorial, I'll explain how you can add "star-rating" functionality to your customized Blogger template.


To use the "star ratings" feature, you will first need to activate this through Blogger in Draft (it's still in beta, and not yet available for use in the regular Blogger dashboard).

Log into Blogger in Draft and  choose the blog you wish to work with. Then go to Layout>Page Elements, and click the "Edit" link on the "Blog posts" widget.

This screen offers many options for you to add (or remove) from the posts section of your blog. If you scroll down a little, you'll see the "star ratings" option. Tick this option to activate this setting for your blog, then scroll down to save your settings.

If you are using a default template, you should see the star ratings widget appear on the post pages of your blog. However, if you have customized your template (or are using a third party template), it is likely that your template does not include the code required to make the star ratings display.

Here is how you can add the required code for star ratings to your non-standard Blogger template

1. Go to the Edit HTML page in your blog's dashboard, and ensure you have checked the "expand widget templates" box.
2. Using your browser's search function, try to find this line of code:
   

   <div class='post-footer-line post-footer-line-1'>

   If you cannot locate this, search for the following instead:
   

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

3. Immediately after this line (either the post-footer or post.body), add the following section of code:
   

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

4. Next, find this line in your Blogger template (this should be a little further down):
   

   <b:include name='nextprev'/>

5. Just after this line, paste the following section of code:
   

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

6. Then save your template.

Now when you view a post page on your blog, you should see the star ratings appear beneath your posts!

Original Source : http://www.bloggerbuster.com/2008/07/how-to-add-star-ratings-to-your-blogger.html