Feb 10, 2012
5 Star Rating Widget For Blogger
My last post was on Thumb Up Rating widget for Blogger, now this time again introducing another widget for blogger called Star Rating widget. This widget was developed by Js-kit. This start rating widget has some great features like its shows 5 Stars to vote. So you can now know how many votes a post has. It also displays stats for the each post. The best place to add this widget is below the post titles. Let's add this star rating widget to blog.
Live Demo
2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.
3. Now click on Expand Template Widgets check box.
4. Search for below code in your Template. More Info On: "How To Find A Code In Blogger Template".
7. Now search for below piece of code.
10. Check the star rating widget by clicking 5 stars.
If you need any help, please use comment section to post all queries...
Star Rating Widget Demo
Add Star Rating Widget To Blog
1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.
3. Now click on Expand Template Widgets check box.
4. Search for below code in your Template. More Info On: "How To Find A Code In Blogger Template".
<data:post.body/>5. Copy and Paste following code just Above <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'> <div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'></div> </b:if>6. The code will display star rating widget only in Post Pages, if you wish to display in Homepage then delete two blue lines.
7. Now search for below piece of code.
</body>8. Copy and Paste following script Above </body>.
<script src="http://js-kit.com/ratings.js"></script>9. That's It, save your template and see working star rating widget below your blog post titles.
10. Check the star rating widget by clicking 5 stars.
If you need any help, please use comment section to post all queries...
About : Ravi Saive
Simple Word a Computer Geek and Linux Guru who loves to share tricks and tips on Internet. Most Of My Servers runs on Open Source Platform called Linux. Because it is usually free and allow me do geeky stuff such as Programming and Scripting with CLI (Command Line Interface).
Subscribe to:
Post Comments (Atom)
35 Responses to “5 Star Rating Widget For Blogger”
February 10, 2012 at 11:16 AM
hello.
is it possible to have multiple ratings in the same post?
February 10, 2012 at 10:15 PM
@ cmserafim - NO! not possible. But Why you need multiple?
February 15, 2012 at 1:41 PM
Possible with this one: http://graddit.com/eng
February 15, 2012 at 10:25 PM
@ fruitfulbookmarks - Another Great rating widget. I will write on this tool soon for bloggers
March 23, 2012 at 11:29 PM
It doesn't work for me..:(
March 23, 2012 at 11:39 PM
@ Pinoy Travel - Where you facing problem let me know so i could help you out..
March 26, 2012 at 10:57 PM
Hi there, maybe you can help me out. I can't seem to get the widget to show up, I'm not sure what's wrong, but I am using a custom template which is probably the reason.
Here's my site: drawsomethinggallery.blogspot.com
I'd like to have the stars show up underneath each post "box", preferably replacing the "n comments" if possible. Any ideas?
March 26, 2012 at 11:12 PM
@ PhilipL911 - Yes!
First find below code in your template.
<span class="mcom"><a onclick="" href="http://drawsomethinggallery.blogspot.in/2012/03/hulk-by-jrl218.html#comment-form" class="comment-link">0
comments</a></span>
and replace above code with below one.
<span class="mcom"><div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'></div></span>
and don't forget to place below script above </body>
<script src="http://js-kit.com/ratings.js"></script>
If you still facing any problem let me add as a author to your blog and will do for you. once it's done then remove me..
March 26, 2012 at 11:50 PM
I wasn't able to find the code, 0 results came up :(
Well, if you don't mind inserting the code yourself, I've added you as an author. Just to be clear, I want the stars to show up on the main page under each post, not in the posts themselves.
Huge thanks! I really appreciate your help!
March 26, 2012 at 11:52 PM
@ PhilipL911 - Got but need admin privileges to edit HTML. please grant admin rights.
March 26, 2012 at 11:54 PM
Oops, there you go!
March 27, 2012 at 12:14 AM
@ PhilipL911 - Added rating widget please check and let me know..
March 27, 2012 at 12:17 AM
Looks amazing! Thanks again! I'm going to remove you from admin status now.
March 27, 2012 at 12:18 AM
@ PhilipL911 - Thanks! Yes go ahead and remove me..
March 27, 2012 at 10:34 PM
Hi again, I have another question :P
Is it possible to set up a gadget on the sidebar that shows the highest rated posts based on the star ratings? (similar to the "popular posts" gadget)
March 27, 2012 at 11:45 PM
@ PhilipL911 - Sorry but its not possible in blogger platform.
March 28, 2012 at 8:34 AM
Thanks this works for me.. I tried many other sites and nothing worked. Yours did the trick.
http://brahmarpanam.blogspot.com/
Thanks
Deepa
March 28, 2012 at 8:37 AM
@ Deepa- That's really great that worked for you and thanks for the comment..
March 28, 2012 at 10:21 PM
this is the first article that i have found working to add 5 star rating to all blog post at once
thank you
please visit my website
http://www.premium4uall.co.cc/
April 18, 2012 at 5:32 AM
Hello, is it possible to change the color of stars without downloading and modifying the script?
April 18, 2012 at 5:43 AM
@ Grzechu - Sorry! no such option is available.
April 19, 2012 at 7:56 PM
And here I'm again: http://graddit.com/eng - rating widget where you can set whatever stars you want (any pictures or symbols). You'll need to modify styles though.
June 10, 2012 at 11:38 AM
is it possible to change the css setting for the rating stars?
i want to set it to "center" but it doesnt work :(
July 2, 2012 at 5:06 AM
Charming, thanks for it.
July 20, 2012 at 2:14 PM
Could you please help me. I'm unable to locate the code :(
July 21, 2012 at 12:44 AM
@ Sambasiva - Where you facing problem or add me as a author to your blog I will do it for you.
August 8, 2012 at 8:48 PM
...at least not yet. I'm going to have a talk with Blogger's developers about this. There is more things I'd like to do with the star ratings that would make it pretty damn cool.
August 8, 2012 at 10:45 PM
thanks..it worked!!!
August 10, 2012 at 3:59 AM
How can i add this star widget under my posts ?
August 25, 2012 at 9:44 AM
Its Worked but why my star widget have a box border ?
look at bestphonechoices.blogspot.com and maybe you can fix them
August 29, 2012 at 4:39 AM
how do you center the stars on the blog post instead of being left aligned?
August 29, 2012 at 4:48 AM
@videogameparty - just place code as follows.
<center>Js kit code here</center>
September 23, 2012 at 12:25 PM
It worked.
Thank you.
http://yoncademirel.blogspot.com
September 26, 2012 at 3:23 AM
hi there, how can i put the stars just before the post so that it appears just beneath the post title?
September 28, 2012 at 12:09 PM
Super! Easy-peasy - works like a charm! I opted to put it at the bottom of each post (placed the code just above my "Related Posts" widget in my custom template.)
I also added a bitty "Rate this post:" just above the pointer code. And for good measure, placed two line spaces above it, so that I can be sure the rating stars will always be spaced a bit beneath the last line of my posts.
Now it will be interesting to see what my readers do with it...
In any case, very kewl - thanks!
Post a Comment