80 How To Add Star Ratings to your Blogger Blog July 03, 2008 /

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!

Anurag Bansal has posted a similar tutorial on his blog, Knowliz. If you have any problems with this version, I'd advise you to check out this page instead (thanks for the comment and info, Anurag!).

If you would prefer the star ratings to appear on all pages of your blog, you can remove the lines which include the <b:if> tags. These lines tell Blogger to display the star ratings only on your post pages; removing them enables them to be displayed on all pages of your blog (take a look at this post for more information about the b:if function).

I hope this tutorial will help you understand how to apply the star-ratings function on your Blogger powered blogs! Please let me know what you think about this post by leaving your comments below.