Categorized | Blogging, Tutorial

Tags | ,

How to Place Star Ratings in Blogger

Posted on 29 June 2008 by Flisha

If you are using a basic Blogger template without customizations, all you have to do is enable Blogger in Draft. Go to Layout -> Page Elements then edit your Blog Posts widget.

Then mark the checkbox for “Show Star Ratings” and you can arrange where you want to place it relative to your other blog post elements.

However, if you downloaded a customized Blogger template from another site or made your own changes to the template, doing this won’t work. You’ll have to get down and dirty with HTML.

Fortunately it’s not that torturous.

You need this code:

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

And this 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.setApplicationId(<data:top.blogspotReviews/>);

google.annotations.createAll();

google.annotations.fetch();

}

google.setOnLoadCallback(initialize);

</script>

</b:if>

Then go to Layout -> Edit HTML and mark the box Expand Widget Templates. Look for this line:

<data:post.body/>

And place the first piece of code after it to put it at the bottom of each of your posts. If you are comfortable with HTML, you might try other placements as well. Just don’t forget to backup your template first.

Anyway, it should look something like this:

<div class=’post-body’>

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

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

<div expr:g:url=’data:post.absoluteUrl’ g:height=’42′ g:type=’RatingPanel’ g:width=’180′/>

</b:if></p>

<div style=’clear: both;’/> <!– clear for photos floats –>

</div>

The second piece of code, you should place between <b:include name=’feedLinks’/> and </b:includable> like this:

<!– feed links –>

<b:include name=’feedLinks’/>

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

</b:includable>

And you’re set. Hope it works for you! :-)

(Sorry for mess. My code is often as unkempt as me.)

Related posts

7 Comments For This Post

  1. Mortgage Rates Predictions Says:

    Hi.. nice blog..and good info here..

  2. Quickroute Says:

    I read below you were revamping your site until the wee hours and I guess by how it’s looking now it worked! – Nice job!

  3. Flisha Says:

    Hi Mortgage and Quickroute,

    Thanks :) I managed to implement embedded comments as well, instead of the ugly Blogger pop-up comment box… Yay for Blogger Draft :)

  4. Flisha Says:

    Testing in IE…

  5. Santosh Puthran Says:

    Use SezWho for ratings of the blog post

    http://managementaccountant.blogspot.com/2008/05/wwwsezwhocom-ratings-and-community-add.html

  6. Arbitrucho Says:

    it works but only the post page, not in the ‘general’ page

  7. Flisha Says:

    Hi Arbitrucho, for me it works both ways… did it not for you?

Leave a Reply

Advertise Here
Advertise Here

Sponsored By

A Member Of

Personal - Top Blogs Philippines

Subscribers

Empowered By

Get Adobe Flash playerPlugin by wpburn.com wordpress themes