Making Star Rating work for modified Blogger.

I was having trouble making the new star ratings feature introduced by Blogger work for my blog. According to blogger team working on long running Blogger in Draft:

If you have customized your blog widget’s template you may not see the Star Ratings. You will need to either reset your blog widget’s template or copy the Star Ratings code from a fresh template.

Not much help.Then I remembered an old solution.

Here is how to make the Star Ratings Work.

Method 1:

The basic template for my blog is Minima, but I guess the method would be same for all the other templates.

In the Dashboard, goto Edit HTML

First and the most important step: Backup your template by clicking Download Full Template. (In case, something goes wrong and you find yourself staring at what your blog looked like three years ago, You can always Upload back the template that you just saved.)

Now, leave the Expand Widget Templates Not Checked (the default)

Use your Browser's search feature (Ctrl+F) to find the following line:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Make a note of this line's location inside the main section.To remember the location, you may note down the simple code in the line above and below this line.

Now, delete this line and save the Template.
You will be asked to Confirm you want to delete the widget.Confirm.

Then go back to the code and put in the same line back in at the same spot inside the main section from where you had first deleted it .

Then Save.

This resets the widget.

Now, follow the normal procedure for activating the star ratings feature of Blogger:
Log into draft.blogger.com Go to Layout and edit your Blog Posts widget.

Here mark the checkbox for "Show Star Ratings" and you are done.

Enjoy.

But, those of you running feedflare by Feedburner would have to re- install the feedflare code to make the flares work.

-0-

Update:Comments made me come up with another simple method to make Star Ratings work for custom blogger templates.

The method, originally suggested mentioned by the blogger team, is simple: copy the code for Star Ratings.

First tried it out successfully on my other blog about quotes from books having Simple II template.

Here’s how to simply do it:

Method 2: 

In the Dashboard, goto Edit HTML

First and the most important step: Backup your template by clicking Download Full Template.

Now,Click the Expand Widget Templates

Use your Browser's search feature (Ctrl+F) to find the following line:

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

Copy the following code for Star Rating just above that line:

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

Save.

Now, follow the normal procedure for activating the star ratings feature of Blogger:

Log into draft.blogger.com

Go to Layout and edit your Blog Posts widget.

Here mark the checkbox for "Show Star Ratings" and Save.
(if this method doesn't work, try this step at the beginning and then follow the rest of the steps)
View the blog, you will see the Star rating at work (wait for the complete page to load since this feature loads last of all on the page)

And it is done.

-0-

Method 3:
Update on request: Adding Star Ratings below post title
Search for :

<div class='post-header-line-1'/>

add the following code for Star rating just below it:

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


Save, Check and it's Done.

Update: In case that doesn't do it (see comments below) and you get XML error message: The element type "b:includable" must be terminated by the matching end-tag "".

To solve. Remove the last line of code: "</div>"  from the above mentioned copy code. That should do it.

-0-

Amanda at Bloggerbuster provides the solution for the making inline comment form work for modified blogger templates. That was a help too!