How To Add Star Rating Blogger feature in Blog Posts

Blogger star rating is one of the new features of Blogger who officially launched in mid-2011 then. First, trial and access activation & use should be through draft.blogger.com. But now no more, the activation feature for bloggers star rating can be done through blogger.com dashboard. Star rating gives the visitor an opportunity to assess the content of blogs / posts who read the contents. For the blog owner, can give a star rating to evaluate the presentation of the contents of the blog.
How To Add Star Ratings Widget On Official Blogger TemplatesOfficial Blogger Template (non custom templates) already has a section that contains the codes star rating widget. If you want to activate it, simply by performing the following steps:1. Go to Blogger dashboard.2. Open layout pages (page elements).3. Click the "edit" on the body posts (blog posts).

bloggers4. Click / check "Show Star Ratings"bloggers5. After that save.Check the blog post, blogger widgets star ratings shown on the bottom of the post.
Note: In some cases, the option "Show Star Ratings" does not exist. If my friend to see such cases, access through draft.blogger.com Blogger.
How To Add Star Ratings Widget On Custom Blogger TemplatesBloggers who are not on the template provided by Blogger itself, star ratings will not appear even though it was activated in a way as above. This is because the Blogger template provided by third parties who are not given star ratings script and HTML. Seeing this, I tried to look at the official Blogger templates and found some parts of the star ratings widget. As a test, I then extract it & apply it on this blog template.There are two important steps to install the star rating bloggers:

    Installing the HTML code star ratings:
1. Enable advance features like star ratings in this way. If not found, access the dashboard through draft.blogger.com. Save.2. Go to edit HTML (template> Edit HTML), do not forget to check "Expand Widget Templates".3. If you want to install the star ratings below the post title, search <div class='post-header-line-1'/> (use Ctrl + F), put the following code underneath. If you want to put under the post content, search <data:post.body/>, put the following code below:

    <div class='star-ratings' style='float:right;'>
    <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> </ div>
Note:-If you have been using the share buttons (Facebook, Twitter, Google +) who share in my previous post, put the above code </ b: if>.- If <div class='post-header-line-1'/> not found, search <data:post.body/>, put the code on it.

    Install Script star ratings:
1. Still on the Edit HTML, search <b:include name='feedLinks'/>, put the following script below:

    <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>
Note: If <b:include name='feedLinks'/> not found, search <b:includable id='feedLinks'>.2. Save the template.Blogger star ratings will appear above or below the appropriate post-chosen way. Be sure & note the position of the widget to fit the blog template. If necessary give the CSS settings in order to appear at positions & perfect fit.
Have a nice blogging * Have a nice learning!