How To Add Star Ratings to your Blogger Blog

by Sushant Risodkar · 3 comments

Star ratings is a new feature currently available through Blogger in Draft. This enables you to add a widget beneath your posts which readers can use to rate your articles on a scale of 1-5, like this:

If you use a default Blogger template, you should be able to activate this feature right away when logged through Blogger in Draft: simply go to Layout>Page Elements and edit the “Blog Posts” widget to activate the display.

However, those using a customized or third party template will need to add the required code to their templates first. In this tutorial, I’ll explain how you can add “star-rating” functionality to your customized Blogger template.

To use the “star ratings” feature, you will first need to activate this through Blogger in Draft (it’s still in beta, and not yet available for use in the regular Blogger dashboard).

Log into Blogger in Draft and choose the blog you wish to work with. Then go to Layout>Page Elements, and click the “Edit” link on the “Blog posts” widget.

This screen offers many options for you to add (or remove) from the posts section of your blog. If you scroll down a little, you’ll see the “star ratings” option. Tick this option to activate this setting for your blog, then scroll down to save your settings.

If you are using a default template, you should see the star ratings widget appear on the post pages of your blog. However, if you have customized your template (or are using a third party template), it is likely that your template does not include the code required to make the star ratings display.

Here is how you can add the required code for star ratings to your non-standard Blogger template

Step 1: Backup your existing template. I assume you know it very well so I am not gonna explain it again.

Step 2: Expand widget templates and copy the entire code some where in Notepad or something. In case something goes wrong, you have the entire widget code.

*Step 3: Go to ‘Layouts’ and under ‘Blog post’ widget, select Star rating. And save the changes.

*Step 4: Go to ‘Edit HTML’ and select ‘Expand widget templates’.

Step 5: Search for this line of code:

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

Step 6: Copy the following code right after the above line of code:

Click here For The Code!

Step 7: Now again search for following code:

<b:include name=’feedLinks’/>

This line you may find several times, so make sure you seek for the last instance at the bottom of the code which should ideally be before the start of sidebar codes. So when you see this line, it should look something like:

<b:include name=’feedLinks’/>

  </div>

            </div>

        <div class=’cont-bottom’/>

        </div>

        </div>

        </div>

 </b:includable>

</b:widget>

</b:section>

….

….

<div id=’sidebars’>

Step 8: Copy the following code right after the line mentioned above:

<b:if cond=’data:top.showStars’>

    <script src=’http://www.google.com/jsapi’ type=’text/javascript’/>

    <script type=’text/javascript’>

      google.load(&quot;annotations&quot;, &quot;1&quot;);

      function initialize() {

        google.annotations.setApplicationId(<data:top.blogspotReviews/>);

        google.annotations.createAll();

        google.annotations.fetch();

      }

      google.setOnLoadCallback(initialize);

    </script>

  </b:if>

Step 9:Preview your changes without saving it. You should see the star rating in each post on your blog posts on the main page itself.

Step 10: That’s it, save your template if satisfied and enjoy the Star ratings on your blog.

Also let me know if this post helped you in customising your template by dropping a comment here or at least leaving your rating.

About Sushant Risodkar

Yo! I'm +Sushant Risodkar & my nickname on web is Typhoon. I'm a 19 yrs. old young blogger from India & the owner of SmartBloggerz. If you are looking for SUCCESS as a blogger & affiliate marketer then SmartBloggerz is the right blog for you. You can follow me on Twitter or be my friend on Facebook. And hey! Don't forget to LIKE SMARTBLOGGERZ on Facebook. Read more About Sushant Risodkar.

has written 377 superb article(s) on this blog

Follow me on Twitter · Visit my website →

Typhoon July 8, 2008 at 3:45 pm

So Try It Now n Enjoy!

Anonymous July 10, 2008 at 11:20 am

Thanks Man For telling abt this i was not knowing abt such thing in blogger

Kirk July 22, 2011 at 5:32 pm

Only white box appeared on each post :(…can you help me how to show the stars without the white background…

Previous post:

Next post:



whos.amung.us