How To Add Star Rating To Your Blogger Blog

With the help of Blogger Star Rating widget your blog visitors can easily rate your blog. If you are using default blogger template then you can automatically add this widget to your blog,but if you are using Custom Blogger Template then you have to add it yourself.This feature currently available through Blogger in Draft.

In this tutorial, I will show you how to add Star Rating Feature to default blogger template and custom blogger template.Follow the given steps below:

Screenshot Demo Of Star Ratings Widget

How To Add Star Ratings Add Star Rating Widget to Default Blogger Template

You can easily install this widget on your default blogger template:

• Go to Blogger Draft
• Choose Blog From List > Layout
• Click "Edit Post" On The "Blog Post" Page Element (Demo Screen Below)

• After Clicking on "Edit", a window will pop and it will look like the image below. You have to check the star ratings box. (see image below)

• You can arrange this widget in "Arrange Items" option area.Now, save and it's done.

Add Star Rating Widget To Custom Blogger Templates

• Go to Blogger Dashboard > Edit HTML > Checked The "expand widget templates" Box.
• Press (Ctrl+F) and Search This Given Code

<div class='post-footer-line post-footer-line-1'>

• If you cannot find this, search for the following instead: 

<p><data:post.body /></p>

• After/Below This Line (either the post-footer or post.body), Add The Following Code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</span>
</b:if>

• Next, Find This Blogger Template

<b:include name='nextprev'/>

• Just After This Line, Paste The Following Code

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

• Save Your Template and Its Done 
• Now, Go to Blogger Draft > Layouts > Under ‘Blog Post’ widget, select Star rating. And save the changes.

Please let me know what you think about this tutorial by leaving your comments below.Blessings and Peace :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.