Jenith Logs

How to put star rating for your reviews in Tumblr blog


Here’s how you can show your rating with stars for your music, movie or any kind of review posts in your Tumblr blog in an easy way. Two steps approach

Please note: This article is designed for users who don’t know how to edit HTML, and so may seem overly simplified if you’re already a HTML code ninja.  But that’s no problem; just skip over the parts you already understand, and use the parts you do need!

Step 1: Adding rating CSS to your blog

Browse to the Customize page on Tumblr by clicking Customize in your Tumblr dashboard or by following the link below.

Scroll down to the bottom of the left panel and look for ADVANCED section and below that one text area inlined with Add custom CSS

Place the below code in this area

 /* star rating code - use lists because its more semantic */  
 /* No javascript required */  
 /* all the stars are contained in one matrix to solve rollover problems with delay */  
 /* the background position is just shifted to reveal the correct image. */  
 /* the images are 16px by 16px and the background position will be shifted in negative 16px increments */  
 /* key: B=Blank : O=Orange : G = Green * /  
 /*..... The Matrix ....... */  
 /* colours ....Background position */  
 /* B B B B B - (0 0)*/  
 /* G B B B B - (0 -16px)*/  
 /* G G B B B - (0 -32px)*/  
 /* G G G B B - (0 -48px)*/  
 /* G G G G B - (0 -64px)*/  
 /* G G G G G - (0 -80px)*/  
 /* O B B B B - (0 -96px)*/  
 /* O O B B B - (0 -112px)*/  
 /* O O O B B - (0 -128px)*/  
 /* O O O O B - (0 -144px)*/  
 /* O O O O O - (0 -160px)*/  
 /* Modified version by Jenith on 10/11/2012. Original Source Attribution: */  
 /* the default rating is placed as a background image in the ul */  
 /* use the background position according to the table above to display the required images*/  
 margin:0 0 20px 0;  
 background: url( no-repeat 0 0;  
 /* add these classes to the ul to effect the change to the correct number of stars */  
 .nostar {background-position:0 0}  
 .onestar {background-position:0 -16px}  
 .twostar {background-position:0 -32px}  
 .threestar {background-position:0 -48px}  
 .fourstar {background-position:0 -64px}  
 .fivestar {background-position:0 -80px}  
 ul.rating li {  
 cursor: pointer;  
 /*ie5 mac doesn't like it if the list is floated\*/  
 /* end hide*/  
 ul.rating li a {  
 z-index: 200;  
 ul.rating a {left:0}  
 ul.rating li.two a {left:16px;}  
 ul.rating li.three a {left:32px;}  
 ul.rating li.four a {left:48px;}  
 ul.rating li.five a {left:64px;}  
 /* end rating code */  

click Save in the top left corner,

You are ready to start rating your articles with stars

Step 2: Placing the HTML code in your rating review posts

Go to your post and click Edit

Edit HTML view

Place the below code in the new HTML window appears and click update

 <ul class="rating onestar">  
   <li>Star Rating</li>  

Preview your changes before you Save Changes

Note that the stars will be shown only in Preview screen as below.  No worries about not showing in Edit Window

Save your changes

To add One star, use

 <ul class="rating onestar">  
    <li>Star Rating</li>  

To add Two stars, use

 <ul class="rating twostar">  
    <li>Star Rating</li>  

To add Three stars, use

 <ul class="rating threestar">  
    <li>Star Rating</li>  

To add Four stars, use

 <ul class="rating fourstar">  
    <li>Star Rating</li>  

To add Five stars, use

 <ul class="rating fivestar">  
    <li>Star Rating</li>