Star Ratings in Blogger using JS-Kit

star ratingsStar Ratings are graphical representation of the likability of a post generally measured on the scale of 5 and represented by stars. This can act as a useful alternative for collecting information about the likability of posts as many readers shy away from leaving comments. Not only is it faster than commenting also there is a added element of anonymity. In this tutorial we will be learning how to embed JS-Kit star rating in Blogger and some handy tricks related to it


Demo

Before we get started

We will be using the Old Interface for this tutorial as the New Interface throws up unexpected errors when editing the template. In case you are one of the people who joined Blogger recently then there might be a chance that you have no access to the Old Interface. To overcome this problem , type the following URL into the address bar

blogger URL

Replace the highlighted number with your Blog's ID . To find the Blog ID , observe the Address Bar while surfing through the Stats , Layout , Template pages of your Blog . You will see a similar large number . That would be your Blog ID


Video Tutorial




Steps

1. Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Star Ratings

Blogger Dashboard Old

2. Now click the Edit HTML button and tick the Exapnd Widget Preview option

Edit HTML Old Blogger Dashboard

3. Now search for <div class='post-header-line-1'/> and add the following code just after it

<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>


JS-Kit related HTML

4. Now search for </body> tag and add the following code just before it

<script src='http://js-kit.com/ratings.js'/> 

JS Kit rating script


5. Lastly add the following CSS just before ]]></b:skin> tag

.js-kit-rating {
height:45px;
text-indent: -9999px;
overflow:hidden;
text-indent: -9999px;
width:85px !important;
} 


js kit ratings related css

6. Hit the Save Template button and view your blog to see where the ratings widget appear

Some handy tricks

Removing Attribution

js kit ratings attribution


As you might have observed ,when you hover over the Ratings , there appears a attribution just besides it , to remove it add the following CSS

.js-kit-rating {
height:45px;
overflow:hidden;
width:85px !important;
}


Removing Total votes text


js kit ratings votes text



By default under the ratings , the total numbers of votes cast are shown , to remove it add the following CSS

.js-kit-rating {
height:45px;
text-indent: -9999px;
overflow:hidden;
width:85px !important;
}


Showing the Thumbs Style

Thumbs Up Thumbs Down


In case you are a fan of the Thumbs up , Thumbs down style of rating ,then replace the code in the Step 3 above by the following code

<div class='js-kit-rating' view="score"  expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>



Feel free to share any tricks or problems that you face while implementing this Rating widget. Blogger also has a inbuilt Rating system , I will be doing a tutorial about it soon

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Unknown said...

another nice tutorial,,now we are eagerly waiting for your tutorial on making buttons(like,+1,tweet) like you have below post title :)

Glad you liked it, I will be doing the tutorial about the Lazy loading Social buttons soon

Fantastic tutorial and i like it.Hope to see more from you

Unknown said...

need your reply here http://www.stylifyyourblog.com/2012/01/new-blogger-template-standardized.html

sarwan said...

Superb....Now am using thins in my Blog

eyoon masr said...

i tried all above steps but doesn't appear any other way

i want to increase the size of the star.i there any way to do that plz reply

Visit www.puresoftwares.net for loads of amazing free software ! All that you can imagine is FREE !

If you get any other type of star then please tell !!

mrbuipr said...

very cool, thank guide so much

shekhar said...

I have tried it several times bt i failed..unable to see it
plz help at http://www.freedownloadzone.in

i want change TOP INFO HOT all of that bacause mi web is in spanish i want change all text for custom text...............i can?

I like your demo button.
Could you send me the codes for demo button.
My mail address is demirelalper@yahoo.com
Thanks.

Unknown said...

Superb Work Dude...
www.AllRegisterSoftwares.Blogspot.com

kawsar said...

this dosnt work because the script has been deleted http://js-kit.com/ratings.js

yes that file is deleted get he new working script @ crazy web ticks

Michelle said...

I would love to add a 5 star rating to the bottom of a few of my posts (not pages)... any idea how I would do that?

locnhadat said...

http://js-kit.com/ratings.js not foud