How To Add Star Ratings to your Blogger Blog

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.

Firstly Go to the Edit HTML page in your blog's dashboard, and ensure you have checked the "expand widget templates" box.


[Please Backup your template before editing to avoid script error]


Using your browser's search function, try to find this line of code:


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


OR


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



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


<br /> <b:if cond='data:blog.pageType == "item"'><br /> <br /> <span class='star-ratings'><br /> <b:if cond='data:top.showStars'><br /> <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><br /> </span><br /> <br /> </b:if><br />




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


<br /> <b:include name='nextprev'/><br />



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


<br /> <b:if cond='data:top.showStars'><br /> <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><br /> </b:if><br />




Then save your template.

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

If you would prefer the star ratings to appear on all pages of your blog, you can remove the lines which include the 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.
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.