Editor’s Star Rating Widget for Blogger

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.

Recieve Free Email Updates!

Leave a Reply