Tuesday 6 March 2012

Adding a Thumbs up Rating Widget


Blogger provides the default star rating widget but I just came across a widget by JS kit that offers two options. You can either use with a star rating look or you can set it to "Thumbs Up!" It counts the total number of thumbs up or thumbs down for each of your posts. The visitor just needs to click his rating option and the count will be automatically incremented. This widget also shows four tabs which displays the likes made by the visitor himself and also shows popular topics under the Hot/Top tabs. It also displays stats for that post. I really found it interesting and I would recommend that you add it to your blogs to engage your readers more and increase your overall page views. The readers would love to explore Hot and Top topics on your blog using this widget.

Add Thumbs Up Rating Widget.
1.    Go To Blogger > Design > Edit HTML
2.    Back up your template
3.    Click the box "Expand Widget Templates"
4.    Search for
<data:post.body/>
    5.   Just above it paste the code below:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'>
</div>
</b:if>
  • This will add Thumbs up widget just below your post titles. The widget will display only at post pages and not on homepage. If you wish to display it on homepage then simply delete the bolded lines.
  • If you would instead like to add the Star ratings look/skin then simply deleteview='score'
     6.   Now search for
</body>
      7.   Just above it paste the following code:
<script src="http://js-kit.com/ratings.js"></script>
      8.   Save your template and all done!
Visit any of your post and click the ratings to either Thumbs Up and Thumbs down the post. You can also explore the tabs.

No comments: