Build Online Store! | Penguin Panda Series - New! | 4 Rules To Make Money | SEO Settings | Facebook Popup 1, 2, 3 | Mashable 1 , 2


Friday, January 27, 2012

Add "Thumbs Up" Rating Widget To Blogger


Pin It

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 »


Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter

24 comments:

Comment Page :
Haider Afridi on 12:02 AM, January 27, 2012 said... #

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

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

Processed Haider. Thanks for reminding. :)

Shubham on 12:41 AM, January 27, 2012 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 3:39 AM, January 27, 2012 said... #

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

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

Great Widget very helpful and useful. Thanks a lot.

Sam Sexy on 8:55 AM, January 27, 2012 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 8:59 AM, January 27, 2012 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 10:44 AM, January 27, 2012 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 11:30 AM, January 27, 2012 said... #

Another useful post

Karan Singh Chauhan on 1:00 PM, January 27, 2012 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 4:50 PM, January 27, 2012 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 6:46 PM, January 27, 2012 said... #

not working..

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

Thanks it works great

Barry Pearman on 1:02 AM, January 30, 2012 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 8:15 PM, January 31, 2012 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 4:01 AM, February 05, 2012 said... #

Obrigado cara gostei

$hubham Meht@ on 11:53 AM, February 07, 2012 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 11:49 AM, February 09, 2012 said... #

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

Atok Fakhrudin on 9:50 PM, February 10, 2012 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 11:22 AM, February 15, 2012 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 9:18 AM, February 18, 2012 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 2:10 AM, March 07, 2012 said... #

Can we add this on comments ?

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

thanks


http://feelfreetomention.blogspot.in/

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

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

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. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

8600+ Followers

Join The Team!

Licensed Under CC

Recent Comments

Follow Me On Twitter

2601+ Followers

My Blogger Tricks (MBT) © 2012. All Rights Reserved | Contact |