January 27, 2012

Add "Thumbs Up" Rating Widget To Blogger


thumbs up widget for bloggerBlogger 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.

 


Live Demo

Add Thumbs Up Rating Widget To Blogger

  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 delete view='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.

Need Help?

If you needed any help with regard to its alignment then be confident to buzz us. Peace and blessings pals! :)





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

49 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. bro what about the guest post i sent u ? it was a hot topic

    ReplyDelete
  2. Processed Haider. Thanks for reminding. :)

    ReplyDelete
  3. hi sorry bro for my irrelevant question but can you please tell me how i can add this type of commenting system to my blog like this blog hasi tried to ask this question to you in the older posts too but you dont have a comment moderation enabled so havent got any reply :( so please help me add this :)

    ReplyDelete
  4. @muhamad,pls how can i make a guest post at mybloggertricks

    ReplyDelete
  5. Great Widget very helpful and useful. Thanks a lot.

    ReplyDelete
  6. @Mohammad
    What about my guest post? Its been so long. I didn't publish it on my own blog as it would have been duplicated as you said. :(

    Please tell me atleast if it qualifies or not.

    ReplyDelete
  7. Bro i've followed your tutorial but its not working on my blog
    http://www.softtechz.com
    without "data:post.body" have any place where replace after this button will be work

    ReplyDelete
  8. nyc tips brother..Can you share the tips to put blogger comment and facebook comment on one tab as shown in your MBT Lab http://zailab.blogspot.com .
    Hoping for your kind reply :)

    Regards
    http://www.gulmiresunga.com

    ReplyDelete
  9. Great work mohd! i want this widget and successfully installed it in my blog and second thing is i want to inform you about your post- Make Pop up subscription box like Awebar that its images are not working properly. The images which was linked to imgboot was damaged or expired. please place new images instead of that. Please Check all images of imgboot at corners at that post.

    and i am happy to inform you that with your blessings and talk, i successfully opened a new blog on Learn Blogger.

    Regards
    www.krackoworld.com
    www.learnblogger.com

    ReplyDelete
  10. Thanks sir once again great tutorial to be honest...

    @Sam Sexy @Mustafa Bhai
    check my effort
    http://www.mybloggerlab.com/2012/01/adding-small-facebook-page-like-button.html

    and both of you please suggest me some tips thanks

    ReplyDelete
  11. Hi, I have a number of guest bloggers on my blog http://www.turningthepage.info/. Is there any widget by which they can see how many visits their posting has had rather than me having to send them a report.
    thanks

    ReplyDelete
  12. HELLO MAHAMMAD
    MY NAME IS YASHWANTH IR IS SO USEFUL I CANT EXPRESS IN WORD THANKS A LOT FOR THAT
    IF U DONT MIND I HAD A SMALL DOUBT
    (HOW TO PLACE A DOWNLOAD ICON IN MY BLOG FOR ANY DOWNLOAD LINK I POST PLS TELL ME PLSSSSSSS I HOPE U WILL)
    MY ID IS :YASHWANTHYASHWANTHHH@GMAIL.COM

    ReplyDelete
  13. wat a gr8 widget... bt its not working for me its giving me an error..

    How To Save Ur Blog From Sopa/pipa

    ReplyDelete
  14. how do i get this rating in the homepage for each post ! :(

    ReplyDelete
  15. I'm also confused in this tip, in other template, it's work, but in my other template, it's not work, tell me how to, please ..
    and how to select one, in my template, there are three code of "" .. help me how to, please ..

    ReplyDelete
  16. @Atok Fakhrudin
    Search for <div class='post-body entry-content'>
    then paste the step 5 number code below it (which is mentioned on this post )
    then follow step 6 then done.. Maybe its will be work

    ReplyDelete
  17. plz support these
    VOTE FOR APPEAL AGAINST DISABLING GOOGLE ADSENSE ACCOUNTS
    http://stopdisabling.blogspot.in/2012/02/vote-for-fight-aganist-disabling-google.html#more

    ReplyDelete
  18. thanks


    http://feelfreetomention.blogspot.in/

    ReplyDelete
  19. Thumbs up or Rating ? I add this on my blog and see the Star Ratting System not the Thumbs up-down.

    ReplyDelete
  20. thanks but is there a way to integrate it to bloggers Popular post side-bar? whichever posts has the most thumbs up displays higher in the popular post bar. that would be a better option.

    ReplyDelete
  21. Awsome bro. plz visit back and review :) http://www.sexgamesbox.blogspot.com

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. It's not working for me! nothing even shows up! :( I would love love to have just a "thumbs up" kind of thing, but instead of the finger just a heart with a number next to it. I dont want any thumbs down! Is there a way to do this for blogspot? I'm sure there is but I can't figure it out! Help would be appreciated!! :))

    ReplyDelete
  24. @Ulil Amri
    > is there a way to integrate it to bloggers Popular post side-bar?
    Try this one: http://www.graddit.com - you can build up best posts widget (widh different sorting options) based on votes.

    ReplyDelete
  25. @ADMIN How to add this post below , PLS Help
    All Pc Tips

    ReplyDelete
  26. will this work on blogger dynamic view?

    ReplyDelete
  27. Thanks Mohammad.
    It worked.

    htt://yoncademirel.blogspot.com

    ReplyDelete
  28. Hello Sir!
    I have got a big problem :(
    I have 3 tags saying in my blog.
    Due to this, i always fail to add any widget inside post body.
    Please send me the solution @ waqasazamkml@gmail.com

    My blog: www.mysmsfolder.blogspot.com

    ReplyDelete
    Replies
    1. actually, 3 tags saying "data:post.body"

      Delete
  29. Bro It doesnt work for mine,actually there r 3()dont knw where to place the code

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. i followed all your instruction but its not working..
    plz help, whats going wrong..?
    this is very important or my blog "www.utubeamazing.blogspot.com" because my blog is about online videos..plz help

    ReplyDelete
    Replies
    1. the script is removed now but we have designed one rating gadget get here

      Delete
  32. the reason this dosnt work is because of this http://js-kit.com/ratings.js

    the javascript has been deleted

    ReplyDelete
  33. Replies
    1. check here we have designed one rating gadget get here

      Delete
  34. Hi, can I know if you have any code for image pop-up?

    ReplyDelete
  35. I dont know why..but its not working..pls help me out...i am trying since long..

    http://www.bloggerslisting.com/2013/05/its-my-walls.html

    I have tried to add but it is not showing on post..

    ReplyDelete
  36. Hi I liked your suggestions very much. Can you just tell me why some gadgets after being added are showing the message "This content is not yet available over secured connections" in my backend. I am not able to add cloud Labels also

    ReplyDelete
  37. I apply all steps but thumbs up and thumbs down are not shown

    ReplyDelete
  38. Bro, it doesn't work for my blog. Maybe there is no source for your external javascript (js-kit . com / ratings. js), the source is 404 Not Found.

    ReplyDelete