How To Add Star Ratings to your Blogger Blog

Thank you for visiting Design24h.com. Do you have comments or questions comment about this article comments.You can also read the article on the blog via the tools to read news Feed Link with this or to subscribe to new posts via email. In addition, you can address this blog to Favorites (Internet Explorer) or Bookmarks (Mozilla Firefox) for easy tracking. If you're working at Google Blogger blog you can also save this blog in the track records, which are the sources that bring visitors your blog. I hope you find interesting tips from this page.

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

1. Go to the Edit HTML page in your blog's dashboard, and ensure you have checked the "expand widget templates" box.


2. Using your browser's search function, try to find this line of code:
   
   

   <div class='post-footer-line post-footer-line-1'>

   
   If you cannot locate this, search for the following instead:
   
   

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

   
   


3. Immediately after this line (either the post-footer or post.body), add the following section of code:
   
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   
   
   
   <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>
   
   
   
   </b:if>

   
   
   


4. Next, find this line in your Blogger template (this should be a little further down):
   
   

   <b:include name='nextprev'/>

   
   


5. Just after this line, paste the following section of 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.createAll();
   
   google.annotations.fetch();
   
   }
   
   google.setOnLoadCallback(initialize);
   
   </script>
   
   </b:if>

   
   


6. Then save your template.

Now when you view a post page on your blog, you should see the star ratings appear beneath your posts!



Anurag Bansal has posted a similar tutorial on his blog, Knowliz. If you have any problems with this version, I'd advise you to check out this page instead (thanks for the comment and info, Anurag!).



If you would prefer the star ratings to appear on all pages of your blog, you can remove the lines which include the <b:if> tags. These lines tell Blogger to display the star ratings only on your post pages; removing them enables them to be displayed on all pages of your blog (take a look at this post for more information about the b:if function).




I hope this tutorial will help you understand how to apply the star-ratings function on your Blogger powered blogs! Please let me know what you think about this post by leaving your comments below.

blogger buster

You may be interested in the following freebies as well:

Search In Blog:

Thank you for reading the article. Do you have suggestions or how better to go back a few words to share with everyone. Please note you, these comments have no comment of building or helping each other progress will be deleted without notice. In addition, you will not necessarily be a member of the Google Blogger or other networks listed below are new comment, use Anonymous (anonymous) if you do not want to leave personal information of themselves.Wishing to house your have been many visitors. The contents of typing in Chinese are clearly marked will easily account for more than all of sympathy. (Design24h.com).