January 27, 2012

Widgets

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 enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!

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 »

41 comments:

Haider Afridi on Jan 27, 2012, 12:02:00 AM said... #

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

Mohammad Mustafa Ahmedzai on Jan 27, 2012, 12:21:00 AM said... #

Processed Haider. Thanks for reminding. :)

Shubham on Jan 27, 2012, 12:41:00 AM said... #

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 :)

omoweblog on Jan 27, 2012, 3:39:00 AM said... #

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

Varinder Pal Singh on Jan 27, 2012, 5:49:00 AM said... #

Great Widget very helpful and useful. Thanks a lot.

Sam Sexy on Jan 27, 2012, 8:55:00 AM said... #

@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.

Atikur Rahman on Jan 27, 2012, 8:59:00 AM said... #

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

Santosh Shah on Jan 27, 2012, 10:44:00 AM said... #

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

Faiz Muhammad Khan on Jan 27, 2012, 11:30:00 AM said... #

Another useful post

Karan Singh Chauhan on Jan 27, 2012, 1:00:00 PM said... #

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

FAIZAN ALI on Jan 27, 2012, 4:50:00 PM said... #

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

mujthaba on Jan 27, 2012, 6:46:00 PM said... #

not working..

محمودالحق on Jan 27, 2012, 7:47:00 PM said... #

Thanks it works great

Barry Pearman on Jan 30, 2012, 1:02:00 AM said... #

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

YASHWANTH KUMAR on Jan 31, 2012, 8:15:00 PM said... #

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

Izaque on Feb 5, 2012, 4:01:00 AM said... #

Obrigado cara gostei

$hubham Meht@ on Feb 7, 2012, 11:53:00 AM said... #

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

How To Save Ur Blog From Sopa/pipa

Shipsocker Genie Land on Feb 9, 2012, 11:49:00 AM said... #

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

Atok Fakhrudin on Feb 10, 2012, 9:50:00 PM said... #

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 ..

Rifat Rahman on Feb 15, 2012, 11:22:00 AM said... #

@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

Santosh pole on Feb 18, 2012, 9:18:00 AM said... #

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

Διελκυστίνδα on Mar 7, 2012, 2:10:00 AM said... #

Can we add this on comments ?

swapnil vashishtha on Mar 23, 2012, 5:17:00 PM said... #

thanks


http://feelfreetomention.blogspot.in/

নিশাচর নাইম on May 8, 2012, 12:15:00 AM said... #

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

Ulil Amri on May 18, 2012, 10:29:00 AM said... #

thanks, its working

Y๏ยภg Stunnค on May 24, 2012, 8:10:00 AM said... #

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.

Rikk's Heart Speaks on Jun 23, 2012, 10:51:00 PM said... #

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

revoreva on Jul 25, 2012, 1:33:00 PM said... #
This comment has been removed by the author.
revoreva on Jul 25, 2012, 1:35:00 PM said... #

@নিশাচর নাইমit's because you delete the code view='score'

Ka$h! on Aug 1, 2012, 3:42:00 AM said... #

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!! :))

fruitfulbookmarks on Aug 15, 2012, 1:13:00 AM said... #

@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.

Munna Haque on Sep 3, 2012, 8:37:00 AM said... #

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

Chiprut on Sep 8, 2012, 11:38:00 PM said... #

will this work on blogger dynamic view?

Yonca Demirel on Sep 24, 2012, 12:49:00 AM said... #

Thanks Mohammad.
It worked.

htt://yoncademirel.blogspot.com

Muhammad Waqas on Dec 24, 2012, 12:00:00 PM said... #

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

Muhammad Waqas on Dec 25, 2012, 7:37:00 AM said... #

actually, 3 tags saying "data:post.body"

teku mishra on Jan 6, 2013, 2:44:00 AM said... #

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

Nishant Bhakta on Jan 8, 2013, 9:43:00 PM said... #
This comment has been removed by the author.
Nishant Bhakta on Jan 8, 2013, 9:45:00 PM said... #

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

kawsar on Jan 12, 2013, 9:24:00 AM said... #

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

the javascript has been deleted

Debbie Navarro on Feb 22, 2013, 7:08:00 AM said... #

Doesn't work anymore too bad...

Click Here To add Comment

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.

Regards,
Mohammad

Support Us

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:-

or try a Beautiful Banner


Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |