How To Add Star Ratings to your Blogger Blog

Advertisement

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.

This Blog Has Been Moved To Wordpress..So check Smart Bloggerz Here.

Blogging Tips

What’s Next? : Don't Just Move Away... Wait! Say something by using the Comment Form below.My Blog is a Do-Follow so enjoy giving your comments and get backlinks from my PR3 blog.

| Add your Comment | Follow me on Twitter

You can also Subscribe to this blog :

Share and Enjoy!

Keywords : Cheap Domains, Make Money Online, Blogging Tips, Web Hosting, Blogger Templates