Saturday, 11 October 2014

|| TIME: ||

Add Review/Rating Stars For Reviews in Blog Post And SERP for Blogger

These days reviews provide good income and many companies and start ups requires reviews from various blogger to increase their reach and to get some good impression among the users and various people.Check this blogger star rating widget


Add Review or Rating Stars For Reviews in Blog Post for Blogger

Add Review/Rating Stars For Reviews in Blog Post And SERP for Blogger

In wordpress adding review star to post is simple by installing a plugin for that.But for blogger you can add them to the post by using the method below.



Adding Skin Elements


1.Go to Blogger>Template

2.Click EDIT HTML

3.Now search for the below one:
]]></b:skin>

4.Now Add the following code above it


/*Review Stars by www.bloggerwing.com*/.file-info-wrap{overflow:auto}.file-info{display:inline;float:left;margin:0 auto;padding:10px}.star-rating-1{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 0;height:33px;width:174px}.star-rating-15{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 -40px;height:33px;width:174px}.star-rating-2{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 -80px;height:33px;width:174px}.star-rating-25{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 -120px;height:33px;width:174px}.star-rating-3{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 -160px;height:33px;width:174px}.star-rating-35{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 -200px;height:33px;width:174px}.star-rating-4{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 -240px;height:33px;width:174px}.star-rating-45{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 -280px;height:33px;width:174px}.star-rating-5{background:url(http://1.bp.blogspot.com/-bB7TeM3Qphs/VAFMY67pNJI/AAAAAAAADHQ/E54J9nmr-KU/s1600/ssss.png) 0 -320px;height:33px;width:174px}/*Review Stars by www.bloggerwing.com*/

5.Click Save and save your template.

Adding Review or Rating Stars To the Post


1.Go to the post where you want to insert the star

2.Click HTML

3.Now paste the following code wherever you want the star to appear

<!--Review/rating Star by bloggerwing.com-->
<div class="file-info-wrap">
<div class="file-info">
<b>Rating : 3.0</b>
<div class="star-rating-3">
</div>
</div>
</div>
<!--Review/rating Star by bloggerwing.com-->
 Now the star appears along with the Rating text like below:
Review Rating Stars  in Blog Post

4.To change the star rating change the values of 3


  • 1 for 1.0 Rating
  • 15 for 1.5 Rating
  • 2 for 2.0 Rating
  • 25 for 2.5 Rating
  • 3 for 3.0 Rating
  • 35 for 3.5 Rating
  • 4 for 4.0 Rating
  • 45 for 4.5 Rating
  • 5 for 5.0 Rating

5.To change the rating text,change the values in 3.0 to the corresponding rating value.


The code can be added in any part of the program and the code will work perfectly.
If any problem in the code.,please comment below 

How To Show Review/Rating Stars in SERP


 You can also show the stars in Google SERP.It adds more trust to your site for the visitor.Just follow these simple steps to show stars in SERP

1.Goto the post you want the star to appear and goto EDIT HTML

2.Now paste the following code in the EDIT HTML


<div class="hreview"> <span class="item"> <span class="fn">Name</span><br/> </span> Reviewed by <span class="reviewer">Reviewer_Name</span>on <span class="dtreviewed">SEP 26 2014<span title="2014-26-09" class="value-title"></span><br/> </span> Rating: <span class="rating">Number_of_Stars</span></div>
 Replace Name with the product name
Change Reviewer_name with your name
Change The SEP 26 2014 with the date and 2014-26-09 with date on YYYY-DD-MM format
Replace the Number_of_Stars with the number of stars you want to display on SERP(1-5)

Now write your article and publish it.After it is indexed by Google,you can see the stars on SERP on the particular post.

Checking The Stars Using Google Rich Snippet Tool

 You can check the stars on SERP by seeing your snippet on Webmaster tools.

Goto Rich Snippet Tool and enter the post URL and click Preview.
Now you can see the snippet that appears on SERP


FINAL WORDS

 All done.Now you can use this on blogger to show stars on SERP and post.This can be done easily on wordpress but this on blogger will be of great use for reviews and ratings.


Check : How To Make Shcool/College to promote your blog
      

Support Us By Sharing