How To Add Thumbs Up Rating Widget To Blogger

While i am surfing over web then i came across on a script which enables "Thumbs Up" widget for blogger blog.Blogger offers star rating blogger widget by default but i am going to provide you a short code through which you able to add a "Thumbs Up" widget to your blog post.This widget offers you two options either than you choose "Thumbs Up" or set to "Star Rating" widget.It counts total number of thumbs up and thumbs down in your blog post.The visitor just click on the desired thumb and the rating is counted automatically by 1 and it will automatically incremented in the widget.

This awesome widget also shows four tabs which displays the likes made by visitor himself and also shows popular topics under the Hot/Top tabs.This widget will also shows the stats for that post.

I really found this widget very interesting and i will recommend you to install it in your blog posts for engaging your blog visitors into your blog and increase your overall page views.The page views increase because the readers will love to explore the hot new topics in your blog which is selected by ratings.

Now if you want to see a demo of this widget then click on the demo button below and see a live demo of this "Thumbs Up" widget and i am sure after viewing this demo you not able to stop yourself for installing this widget in your blog.

How To Add Thumbs Up Rating Widget In Your Blogger/Blogspot Blog

Step1.) Login to your blogger Account.

Step2.) After Login Go to Your Blogger Dashboard > Click On Design > Edit HTML.

Step3.) Tick On "Expand Widget Templates".

Step4.) Now search for the following code in your blog's HTML (Press CTRL + F for search bar for finding code easily in your browser).

<data:post.body/>

Step5.) Now copy the below code and paste it above the <data:post.body/> tag which you find above.

<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 a "Thumbs Up widget to your blog's post just below the post titles.The main this is the widget just shows on the post pages not on the homepage so it doesn't look ugly.
• If you would instead like to add the star rating then delete the view='score' from the coding.

Step6.) Now find the below code in your blog's HTML.

</body>

Step7.) Now copy the code from below and paste it above </body> tag which you find above.

<script src='http://js-kit.com/ratings.js'/>

Step8.) First see preview for checking errors if there is no error then save your template.

Now visit any of your blog post and check the ratings widget and rate your post by "Thumbs Up" or "Thumbs Down" and you can also explore the tabs.

Enjoy this cool new widget for your blog if you not able to get anything then feel free to comment below for any questions and suggestions.