Add Star Ratings to Blogger Posts

Learn how to add star ratings to blogger posts:

• Login your blogger account.

• Go to the Edit HTML page in your blog's dashboard, and ensure you have checked the "expand widget templates" box.

• Type following code in search box or Press Ctrl + F to find following code,

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

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

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

Immediately after this line (either the post-footer or post.body), add the following section of 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 line in your Blogger template (this should be a little further down):

    <b:include name='nextprev'/>

Just after this line, paste the following section of 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>

Then save your template.

Now when you view a post page on your blog, you will see the star ratings in your posts! Happy Blogging!