Saturday, July 5, 2008

How to add Blogger Star Ratings to a customized template

Star Ratings has been added to Blogger in Draft. If you have customized the template you might find that the Star Ratings does not show up on your blog.

Go to Blogger in Draft>Layout>'Edit HTML' and select 'Expand widget templates'.

Search for this row:

<p class='post-footer-line post-footer-line-3'/>

Replace it with the following:

<div class='post-footer-line post-footer-line-3'><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> </div>

Search for something like this:

<b:widget id='Blog1'

Now continue searching for the end of this widget:

</b:widget>

You will find two rows like these:

</b:includable>
</b:widget>

Before these two rows the following should be placed

<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>

Preview to make sure it works. If you are unsure make a backup before you save it.

2 comments:

  1. Restored comments

    Japanese whisky said...

    Is it possible to add this feature into the body of a single post, rather than at the bottom of all posts.
    I would love to use it to help readers to my blog give reactions to individual whiskies that are being reviewed (rather than to the blog post itself). But this seems to be an all posts or nothing feature. Am I right?
    July 27, 2008

    JTB World said...

    I wish it was possible but when I tested it I could get the star ratings show up but the selection does not stick to the post.

    The following didn't work (space after < has to be removed):

    < 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'>
    < /div>
    July 28, 2008

    ReplyDelete
  2. didn't let me preview got this error

    The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements.

    ReplyDelete