Many people might be wondering if adding star ratings in their blogs could be possible. Well, the answer is simply "yes". Then the next question "How?" will follow. For those HTML adept individuals, this question may be too easy to implement within a minute but, for those who don't have enough skills and knowledge, this could be certainly difficult to handle.
Blogger, unlike WordPress, is way too complicated to handle and integrate features. No plug-ins with very limited widgets yet, one of the simpliest and easy-to-manage blogging platforms. Plus, it's owned by Google.
Back to where we are, why do we need this so called "Ratings"? Well, it's not that much important but this will definitely adds flavor to your website/blog. This will also determine how your readers likely enjoy your posts.
Below are the steps to add 5-star ratings to your posts:
1. First, you need to grab the code from www.graddit.com. Choose from the different styles that will suit your taste. In the Platform Tab, choose Blogger.
2. Then, go to Blogger and change the template's code. But before that, you have to back-up your template first before editing any code lines. To do so, go to Blogger » Template » Back-up/Restore » Download Full Template. After that, go to Edit HTML » Click Expand Widget Templates.
3. Find (Ctrl + F) the code </head> and paste the below code[1] right "above" it for the CSS styles.
5. That's it! You're done!
 |
| graddit.com |
3. Find (Ctrl + F) the code </head> and paste the below code[1] right "above" it for the CSS styles.
Code[1]:
4. Find the code <data:post.body/> and copy the code[2] depending on where you want to place the rating. Remember that if you have multiple <data:post.body/> especially when you're using magazine template, you will find several of these codes. Try them out one by one until you get the desired result.
Note #1: If you want to place the rating below post title, write it "above" <data:post.body/> or put it "below" the code if you want to place it at the bottom of the post.
Note #2: If you want to show the ratings "only" in the posts pages and "not" in homepage, change the code:
<b:if cond='data:blog.pageType != "static_page"'>
to
<b:if cond='data:blog.pageType == "item"'>
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>Note #1: If you want to place the rating below post title, write it "above" <data:post.body/> or put it "below" the code if you want to place it at the bottom of the post.
Note #2: If you want to show the ratings "only" in the posts pages and "not" in homepage, change the code:
<b:if cond='data:blog.pageType != "static_page"'>
to
<b:if cond='data:blog.pageType == "item"'>
Code[2]:
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://img.graddit.com/img/ice_star.png"/>', '<img src="http://img.graddit.com/img/red_star.png"/>']]}</div>
<div expr:id='"feedback_" + data:post.id' class='ffbs_feedback'>{["Useless", "Boring", "Need more details", "Perfect"]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='"http://graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&&feedback=feedback_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_fimg&class_star_set=ffbs_star_fimg&class_star_vote=ffbs_star_fimg&average=yes&views=yes&votes=yes"'></script></b:if>5. That's it! You're done!
 |
| Sample star rating in blogger. source: Random Stuff Online |
Happy Ratings☺
