Best way to sustain readership is to make it as interactive as possible. But at the same time we need to remind ourselves that the readers jude you posts in matter of minutes.. They scan your posts (before actually reading them) and then decide to read further. So if you can allow users to interact with your posts without any annoying popup and signup forms,.. then the 5 star rating system is something you need to incorporate
| You may notice Some stars displayed at my posts.These are the Rating-stars. You may click on the stars to rate your opinion on the concerned post |  – Poor – Fair – Average – Good – Best |
This script has been developed and deployed by the team at http://js-kit.com.Do drop by there..I am sure other scripts developed by them will impress you equally well.However..Instructions to use the 5 star rating system in blogger is as follows
- SAVE AND BACK UP YOUR TEMPLATE
- In TEMPLATE-EDITHTML – check the “Expand widget templates”
- Locate the <div class=’post-header-line-1’/> and insert the following right after it (and before <div class=’post-body’>)
- So your final code should look something like this
- Locate the </body> in the template and add the following before it
<div style=’float:left; margin-right:10px;’>
<div class=’js-kit-rating’ expr:path=’data:post.url’ expr:title=’data:post.title’>
</div>
</div>
<div class=’post-header-line-1’/>
<div style=’float:left; margin-right:10px;’>
<div class=’js-kit-rating’ expr:path=’data:post.url’ expr:title=’data:post.title’>
</div>
</div>
<div class=’post-body’>
<script src=”http://js-kit.com/ratings.js “>
</script>
</body>
Your appreciation is my motivationKindly linkback to this post as you recomend this 5 star rating feature to your fiends
Deepa: I love this one! It should start to appear in all my blogs soon!!
Bruce..
Glad you liked this ..If you wish to display the text “Rate this post”.. or any text that you mmight prefer you just need to add them here IN YOUR TEMPLATE
<div style=’float:left; margin-right:10px;’>
RATE THIS POST
<div class=’js-kit-rating’ expr:path=’data:post.url’ expr:title=’data:post.title’>
Thank you very much. I landed at your page from the comments in the js-kit website. Your help made it working in my Blog too. Thanks
Anon..
Glad to be of help..Can you plase give your name next time ( just any name Tom – Anne.. )
Sure
Thanks! This is exactly what I have been searching for!
Regards,
Tricia
Hi Tricia..
Welcome..Glad u liked this feature..
..dont forget to link back
Deepa – I love your blog for all the tips that you’ve given. I’ve wanted to link you for a loooooong time – finally I did it today! I’ve added the rating feature to just one post, and it seems to be working. 😀
I don’t know how one can repay the efforts that you’ve taken. Keep going.
Regards.
PS: I seem to have encountered a bug. Will let you know if it works. I am testing this out at Writing classes
Hello Deepa,
is there any way to know who rated the post?
thanks.
kat
kat..
No its not possible to know who rated.. This is just to allow the reader to give an opinion who feels lazy to write a comment..so it only makes sense..’see-scan(thepost)-click’..
tnx but how do i add it below my blog post?
Lkwit
Your template must be having the following
<p class=’post-footer-line post-footer-line-2’><span class=’post-labels’>
[[[SOME CODE TO DISPLAY THE LABELS ]]]]
</span>
—-> YOU MAY ADD THE RATINGS CODE HERE TO GET THE STARS PLACED BELOW THE POSTS <—-
</p>
Hey i used this on my forum and it works, awesome job! The only problem tho, is that once I used it once it keeps that score throughout the forum. What I mean is if I post 5 of them, then they will all record the same score… Anywho good job!
ok tnx deepa! works 🙂 but i think on the upper right corner is better though:
http://dynamiclinq.blogspot.com/
Dutchiee
welcome.. glad u found this post helpful
could u pls share the url where u r using this.. so that i may take a look
Likwit_Snake
yes..i thought so too…
..btw dont forget to linkback 🙂
Thanks again Deepa. Been looking for this one for quite a while.
Brilliant, it all works now. I really like this feature a lot. Thank you so much! Your blog is so helpful!
Thanks again!
PS: Sure you can see how it is on my forum..
http://z11.invisionfree.com/Black_Rock/index.php?showtopic=196
Bulimic
glad u liked this
enjoy
Dutchiee
nice to know that u like this
..–smiles— dont forget to link back..
does this work on blogger classic templates ? im having trouble implementing it ..
Anna.. this does not work with classic blogger template..
At this moment there are more hacks to enhace u r blog appeal for new-xml template
It strongly suggest that u migrate to the new template.. you can still use all the scripts and code in the new template.. its just that you need to take a back up of u old template.. and then add the scripts as widgets.. belive me its no rocket science
just drop by when u face a roadblock uploading the new look.. I shall be glad to help you migrate
this hack like very good.. i wanna try it. thanks!
Deepa, I just stumbled upon the js-kit and thought of doing this. I made a few changes with mine though, I put it beside the title.
Let’s just hope js-kit’s servers can handle the load, because this has got to be one of the best plugins out there, and this will surely attract attention.
Will be linking to your blog soon. Thanks.
Welcome Paolo
////this has got to be one of the best plugins out there///
couldnt agree more.. and I am also keepign the fingers crossed hoping that their server can handle the load
Thanks for liking back to me
Hi Deepa,
Good article. I could put it on my blog http://plentyofoffers.blogspot.com, though not able to put it next to e-mail icon. Can you suggest where I should keep the code?
Nice work.
-Siddu
//though not able to put it next to e-mail icon.///
do u want to put the stars near email icon…is that what u mean ? ?
this is the code that displays email links
—————————–
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>
<span class=’item-action’>
<a expr:href=’data:post.emailPostUrl’ title=’Email Post’>
<img src=’http://deepa7476.googlepages.com/email.gif’/> this line might vary in ur template
</a>
</span>
</b:if>
you can place the code for 5-stars before or after this..hope this helps
Deepa, little help. I re-did my blog and I almost got everything (slimbox, js-rate, analytics) to work together. Well almost. You see I’m stuck with this next & previous thing again. At the home page, the stars are there, but when I click previous or next, the stars don’t get displayed anymore. Although if you click on the post and view it individually, it’s there. I put my stars beside the topic title instead of doing it exactly like yours, but I already did this before and it worked fine. Unless I’m still having conflicts with my other scripts?
Paolo..
///I re-did my blog and I almost got everything (slimbox, js-rate, analytics) to work together.///
Congrats
//but when I click previous or next, the stars don’t get displayed anymore///
Yes.. noticed that in my blog too.. eventhogh the code for the 5 stars are present (even after calicking polder posts).. for soe reason.. they are not displayed.. thanks for bringing this to notice.. let me see what i can do
hmmm…if you’re experiencing it too, then I guess I don’t have any conflicting scripts? Unless you have conflicting scripts as well? But my guess is that it has something to do with how the page is loaded when pressing previous and next. It’s also the previous and next buttons that would cause slimbox loading problems. I’m still sniffing around, maybe I can get an answer. If you do figure it out, please let me know.
//But my guess is that it has something to do with how the page is loaded when pressing previous and next///
I think so too… I am also trying to figure out..
Great!
Here is another great rating system for any blog such as blogger.
http://widgetsforfree.blogspot.com/2008/01/ratings-for-bloggers.html
@morgan
Thanks for the info.. now there is a choice to choose from 🙂
Hi Deepa,
How can I tweak the codes so that the 3 lines of “rathe this post” “stars” and “no of votes” can appear on the same line/row?
Also like to have this single line/row by itself itself of appearing beside the photo/text of my post.Reason is that my photos are sized to occupy the whole width of the main wrapper.The code as it is now makes the rating stars etc to occupy the left of the main wrapper pushing my photos to the right and hence, truncating it. Thanks in advance for your advice.
Hi Herbert
Can you please mail me your template and url of the blog..
Will certainly look into it 🙂
my rating star dost work
@Oeoeos
Welcome here,
Could you please share your blog url
Hi, is there a way to put the star rating right to my x comments beneath my post, not under it, but right to it?
@letMeLeakIt
Welcome here, Yes it is possible to put the ratings right next to (n) comments.
Back up your template
Edit html – Put check mark on “Expand Widget”.
Now try to locate the following peice of code.
<!– quickedit pencil –>
<b:include data='post' name='postQuickEdit'/>
</span>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> STAR RATINGS HERE
although the actual tag might differ depending on what template you are using, but you can use the “Bold” part in the above code as a guide to locate the area that goes next to x Coments
If you still have problem, please upload your xml file to some common fileshare (googlepages, box.net), and give me the link, i will take a closer look.
Hope this helps.
dont forget to linkback,
thanks for dropping by.