Add Star Ratings to Blogger posts

This was one of the mistakenly added feature around a month ago when the Blogger team did not intend to sneak it out. But now Blogger has added Star Ratings for each of your blog posts and you can use them at your blogs. The basic reason to add this feature beneath your blog posts is to show the popularity of the post.

This was one of the features added by Blogger in its 26 June updates, and is also available through blogger in draft. The rating system consists of two parts one part displays the average ratings of the post till now and the second one has the feature through which you can add your rating. Try it an the bottom of this post :)

How To Install Star Rating System For Blogger:

For Default Template Users:
The Installation is pretty simple for those who use the default templates of Blogger.Just follow these instructions to get it working.
> Log in to Blogger in Draft
> Go to Layouts > Page Elements (it is default when you open Layouts tab)
> Click on the 'Edit' Button for the 'blog post' page element
> Select the Show Star Rating box, and align it where you want to place it, using the arrange items preview.
> Save and You are done :)
That was a breeze, Isn't it?

But there can be a problem if you are using Custom templates, wherein the Star ratings won't show at all? But not to worry.

IF YOU ARE USING CUSTOM BLOGGER TEMPLATES:

> Perform the above steps.
> Go to Layouts > Edit HTML, and expand widget templates.
> Search for this code : <data:post.body/>
Below this search for <div class='postinfo'>
Paste this code just below the above found code :
<div class='star-ratings' style='float:right;'>
<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> </div>

> Now search for this code: <b:include name='feedLinks'/>
Place this Code just below the above found 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.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

The code should look somewhat like this:
<b:include name='feedLinks'/>
<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.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>

> Save the template and you are done :)

You have the Star Ratings enabled for your blog now. You can Rate this post too below. If you have any queries feel free to ask.

You May also check out - How to add Inline Comment Form to Blogger

Do Comment and To keep yourself updated about Technology Subscribe to our feed

Comments

  1. Tried your hack, but it didnt work!

    Could you help me out?

    My email:

    ujsceara@gmail.com

    My blog:

    ujsceara.blogspot.com

    ReplyDelete
  2. David,
    I checked your blog, and looked to me that you haven't placed the second code properly onto your blog. I have mailed you regarding how to correct this.

    ReplyDelete
  3. help please?

    it doesn't work for me, i'm confused..

    blog: www.gotta-shine.blogspot.com

    please get back to me on my blog, just leave a comment on any page. it would be appreciate alot.

    thank you

    ReplyDelete
  4. sorry, my mistake. it did work!! thank you!!

    the star ratings don't show on the main page, but that's because i've enabled the expandable post hack so it's fine.

    thank you!

    ReplyDelete
  5. Nevermind, Glad it worked for you :)

    ReplyDelete
  6. Hello
    If I do not have ''div class='postinfo'''
    in my template, what else should I look for
    Thank You
    :)

    ReplyDelete
  7. Hi Ptiza,
    Welcome to CorpseofAttic.
    Regarding your problem:
    There is no hard and fast rule for the code to be placed. Just find data:post.body/. This depicts the Content of your Blog post. So if you place the code just after this line, Star Ratings would Appear just after the Blog Post.

    So you can actually customize it according to your design theme, and place it anywhere it looks good :)
    Happy Blogging

    ReplyDelete
  8. Nevermind :) My pleasure Ptiza.

    ReplyDelete
  9. Well frankly I'm of the opinion to keep the blog as simple and plain as u can. Adding features although might look cool to you but to new visitors it looks a lot of clutter.

    Just be with the KISS rule and go with bare necessities.

    Best
    Lucy How

    ReplyDelete
  10. I agree Lucy, but few people like the frills ;)

    ReplyDelete
  11. works, thanks,, note: "my template too complex"

    ReplyDelete
  12. You can't search or arrange posts based on star rating so I don't the a point in installing this.

    ReplyDelete
  13. Hi, The star rating isn't showing up for me. Here is my test blog where I tried it out: http://cuntmagtesting.blogspot.com/

    Ignore the appearance; it's just a test blog so I don't break my working blog. My actual blog is here, if you're curious: http://dailycuntpunch.blogspot.com/

    Any advice would be appreciated. Thanks.

    ReplyDelete
  14. I think it kind of nice. It lets the reader give a way to leave a bad opinion without being 'sassy. It also should let you know what type of posts and comments are reaching your reader. Maybe they prefer long articles (not me) or just short usefull blurps. Anyway, if it used honestly, you can get a better idea of what 'works' or not.

    ReplyDelete
  15. i hve added the code... but i havn't get the star rating.. can u plz help in this issue.
    my blog is http://chennaipoint.blogspot.com

    ReplyDelete
  16. Me too. My template doesnt sport the postinfo line.

    ReplyDelete
  17. it is showing nothing to me
    http://templates-widgets-softwares.blogspot.com/

    ReplyDelete
  18. Great by using this feature will make our blog more efficient and effective. I will try it.

    ReplyDelete
  19. Is rating is based on per ip - per posts?
    What is the best placement for this widget, which could make the visitor to read the content with lots of interest.

    Help will be appreciated.

    ReplyDelete
  20. thanks man its working in my blogger but one problem is there ,its see near the title post in right side i want to move it on bottom right side

    whats the procedure

    my blog is

    http://dweaponsclub.blogspot.com/

    ReplyDelete
  21. this is a nice add on by google.

    ReplyDelete
  22. That's nice to read you blog as you continually provide great contents not seen on other site. Keep it up your site visitors will love your site a lot.

    ReplyDelete
  23. I have spent quite some time to eventually stumble on your blog post about this topic. Great work.

    ReplyDelete
  24. Hi Gaurav,

    Thanks for the nice add-on. Works fine in home page. But if I open any particular blog, then in resulting page, the rating is displayed twice!

    http://sunilpadiyar.blogspot.com/
    is my blog.

    Thanks a lot in advance!

    ReplyDelete
  25. Try http://www.addrating.com. They have a great FREE rating widget, I have tried it for http://innovatwwithgadgets.com

    ReplyDelete
  26. this not work in my blog plz check and tell me

    my id rk.kash26@gmail.com

    my blog

    hdmegavideomovie.com

    ReplyDelete
  27. > thanks for sharing..but this not work in my blog, why..? I have did all of you tell about..

    Consider 3d-party services where you have more flexibility, like this one: http://all-rate.appspot.com/eng

    ReplyDelete
  28. Hey man, I did exactly what you said, but its not seeming to work, i'm really trying to get my blog up and running to its full potential, if you could help me out and take a look at my code that would be much appreciated, thanks.
    http://beatasaurusrex.blogspot.com/

    ReplyDelete
  29. > BeatasaurusRex
    Well, I see you figured out how to use a rating widget, so what's exactly the problem? :)
    I see also that some of your posts have more than one rating. Are you manually adding it to each post?

    ReplyDelete
  30. Can't find those options Layout>edit html expand widgets. Plus is there a way to customize the image instead of a star? Thanks and appreciate your help.

    ReplyDelete
  31. It is difficult to implement it. The simplest method is to get the html rating code from www.ratingcode.com and paste it to rate anything on blog.

    ReplyDelete
  32. not working, though I've checked star rating , but it didn't display on my blog post.
    I use default template : Simple

    ReplyDelete

Post a Comment

Use Real names , No Spam or Anonymous Comments (Commenting Policy)
All Comments are moderated