Jenith Logs



How to put star rating for your reviews in Tumblr blog

Image

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:http://www.pmob.co.uk/temp/star-rating.htm */  
 /* 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*/  
 .rating{  
 width:80px;  
 height:16px;  
 margin:0 0 20px 0;  
 padding:0;  
 list-style:none;  
 clear:both;  
 position:relative;  
 background: url(https://sites.google.com/site/yjenith/star-matrix.gif) 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\*/  
 float:left;  
 /* end hide*/  
 text-indent:-999em;  
 }  
 ul.rating li a {  
 position:absolute;  
 left:0;  
 top:0;  
 width:16px;  
 height:16px;  
 text-decoration:none;  
 z-index: 200;  
 }  
 ul.rating li.one 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>  
 </ul>  

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>  
 </ul>  

To add Two stars, use

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

To add Three stars, use

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

To add Four stars, use

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

To add Five stars, use

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

Trackbacks & Pingbacks

  1. Tumblr Star Rating Tweaks - BlogoSfera pingbacked on 2 years, 4 months ago

Comments

  1. Cool Jenith. Like it.

    | Reply Posted 5 years, 1 month ago
  2. Hi there, i read your blog from time to time and i own a
    similar one and i was just wondering if you get a lot of spam remarks?
    If so how do you reduce it, any plugin or anything you can advise?
    I get so much lately it’s driving me crazy so any help is very much appreciated.

    | Reply Posted 4 years, 4 months ago
  3. * Paul Owen says:

    This looks great on the desktop site, but you can’t see them on the tumblr app or mobile site. Do you know any way round that? Thanks, Paul

    | Reply Posted 4 years, 3 months ago


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: