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("annotations", "1");
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 customizing your template by dropping a comment here or at least leaving your rating.
*Update : Added Steps 3 & 4. Added image for clarity.
![[Valid RSS]](http://img80.imageshack.us/img80/339/validrssrogers.png "Validate my RSS feed")
@Brad Farless:
I checked your blog and it seems you are showing the blog rating in the bottom footer of every post.
Wouldn’t it be good to show in line with the ‘Bookmark’ widget? You wouldn’t have to worry about background color.
Else you need to check the color of your footer. If you want you can send me the full template of your blog. I can look and let you know where you need to change, what.
Hope it helps.
Cheers
Anurag Bansal
How would I do that? Have them show up next to each other? Or rather, one on top of the other, centered would be nice. I tried, but the stars seem a little skewed to the left. I’ll send you my template so you can take a look.
Or you could tell me how to change the background color in that footer section?
@Brad:
I sent you the updated template. Check if it works the way you wanted.
Thanks
Anurag Bansal
Hi Anurag,
I simply cannot enable posting comments in my Blog. Could you please edit my template?
I will send you an e-mail.
Thanks in advance.
Hi Anurag!
Could you help me to change the white background color of Star Rating System. The white background doesn’t match with the theme. My blog address is http://testingnook.blogspot.com
Thanks in Advance.
@Mohit:
Currently there is no way of matching ‘Star Rating’ Background with the template. It indeed, looks ugly on a dark background blog.
Sorry, I can’t help with that.
Instead if you want, you can try a Google Friend Connect widget for ratings. That seems to work well. Let me know if you need help with that.
Cheers
Anurag Bansal
Thanks anurag for your help and time
I think I should remove the ratings for now…I will add it in future when I have followers for my blog 
hi anurag please help its not working for me. i am sending my XML template to you on blog@knowliz.com please check it if there any problem.
Regards
inder
hi anurag try this 1 Click setup to get stars.
http://templates-widgets-softwares.blogspot.com/2009/07/add-star-ratings-widget-to-your-blog.html
TODO http://bit.ly/Zsvp0
blog star rating flash2nd
How do I add star ratings to my blog if my blog edit does not have the box to select star ratings? Thanks for your help
Are you using Blogger? Try switching to draft.blogger.com and then check, you should see “Star Rating” in your blog template layout dashboard.
I will suggest reading the article again to understand all steps.
Thanks
Thank you very much for your help but now it displays twice? Your advice is greatly appreciated.
That's good.
And the problem you are talking about is pretty common and very simple
to rectify. Just search for the Star rating code block. It must be
twice in your template.
Delete one set. Preview before saving. If everything is fine, then
save your template.
That's it. Enjoy.
Anurag Bansal
Dear Anurag:
Now the star ratings is working very well but when trying to click on post a
comment, it does not allow me to do it. Any ideas? Thanks very much.
Floweringarden.
Try reverting the changes to see if it was because of Star rating. If it is then you will have to go through the tutorial again to see if you missed something, pasted the code at wrong place or something like that.
Else you know it is not because of Star rating modification, so the cause should be something else. That you will have to find yourself. May be you did some recent changes, some javascript or something. (Hint)
Let me know how it goes.
Thanks
Hi, I am trying to add a “Star rating” option to my blog. However , when I try to do Step 3 (*Step 3: Go to ‘Layouts’ and under ‘Blog post’ widget, select Star rating. And save the changes.), I dont see this option of Star rating. Any help will be greatly appreciated. Thanks!
Please ignore my earlier question. Figured it out, it works now. Thanks for the explanation on your post.
You have been only who resolve my problem since I have read many materials!
But how make that it is appeared in Russian language?
hi can you help me with my white background star rating. it doesn't blend on my template.. i just have a black background.. can u just give me the code and guide me to where i will paste it? Please email me. Thanks!
worked like a charm … I added it just below the title – it takes time to load and appear but finally does. That's the only thing that took me 20 minutes to figure out
worked like a charm … I added it just below the title – it takes time to load and appear but finally does. That's the only thing that took me 20 minutes to figure out