Editor’s Star Rating Widget for Blogger

Adding editor’s star rating to your reviews and and products specs will improve your content relevance and attract readers to the details of the item being reviewed. Unfortunately, this widget is not available officially on the Blogger platform. Like the BloggerInDraft Reaction Poll introduced in 2008, every other Blogger rating widget out there uses JavaScript and only allows your readers’ rating, prompting to my development of this simply widget.

Editor’s Star Rating Widget allows you to add star rating to your reviews and articles you wish to rate. If you are running a sport blog, this widget can be used to rate an athlete profile or the profile of a company or organization.

In as much as we love the flexibility and dynamism JavaScript has brought to web development, we also enjoy fast-loading website with user friendly interface. So, we have excluded the use of JavaScript in this widget, basing it entirely on CSS.

Demo

If you are eager to see how this works, you might want to scroll down to the bottom of this post. Just to remain on the safer side: Make sure you backup your template before editing its contents.

Applying Stylesheet

Like I mentioned earlier, this widget is based on CSS. Before we proceed, you must have to apply this CSS to your blog template.

  • Logon to your Blogger dashboard
  • Select Template from your blog drop down menu
  • Click on Edit HTML just below your blog thumbnail
  • Using ctr + f find ]]></b:skin>
  • Above it, paste the following code:
/*Editor Star Rating Styles*/.file-info-wrap{overflow:auto}.file-info{display:inline;float:left;margin:0 auto;padding:10px}.star-rating-1{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 0;height:33px;width:174px}.star-rating-15{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 -40px;height:33px;width:174px}.star-rating-2{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 -80px;height:33px;width:174px}.star-rating-25{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 -120px;height:33px;width:174px}.star-rating-3{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 -160px;height:33px;width:174px}.star-rating-35{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 -200px;height:33px;width:174px}.star-rating-4{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 -240px;height:33px;width:174px}.star-rating-45{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 -280px;height:33px;width:174px}.star-rating-5{background:url(http://3.bp.blogspot.com/-0eJ3uPqyk2c/UrOhj91xHiI/AAAAAAAAEMQ/EUKzOkRHNyI/s1600/sprite+star+rating.png) 0 -320px;height:33px;width:174px}/*Editor Star Rating Ends*/

  • Click on Save Template and proceed to the next step.

Adding Editor’s Star Rating to Post

To add Editor’s Star Rating to your Blogger post and of course pages, leave a dummy text where you want the star rating to appear.

Next, Click on HTML, find and replace the dummy text with the HTML code below:


<!--Editor Start Rating Widget--><div class="file-info-wrap">
<br /><div class="file-info">
<br />Price When Rated: <br /><br /><div style="text-align: center;">
<br /><del>$250</del><ins>$235</ins></div>
<br /></div>
<br /><div class="file-info">
<br />Our Rating: 3.5<br /><br /><div class="star-rating-35">
<br /></div>
<br /></div>
<br /><div class="file-info">
<br />Item Spec: <br /><br /><div style="text-align: center;">
<br />OS Android 4.2.2 Jelly Bean</div>
<br /></div>
<br /></div>
<!--Editor Star Rating Widget Ends-->

Note: Replace the above words with details that corresponds with the item you are reviewing.
To change the star rating simply change 35 in <div class=”star-rating-35“> to any of the following:
  • 1 – For 1.0 Star Rating
  • 15 – For 1.5 Star Rating
  • 2  – For 2.0 Star Rating
  • 25 – For 2.5 Star Rating
  • 3 – For 3.0 Star Rating
  • 35 – For 3.5 Star Rating
  • 4 – For 4.0 Star Rating
  • 45 – For 4.5 Star Rating
  • 5 – For 5.0 Star Rating

Of course, you will have to change the figures in Our Rating: 3.5 to the corresponding star rating.

If you don’t get any of this, do not hesitate to ask questions as we, attend to every questions in our comment section.

Did you get the answer you were searching for?

Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get Answers for Free!

Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.

Ask Question
Premium Service

Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.

Get in Touch

Or just leave a comment...

Leave a Reply