How to add cool hover effect in your comment avatar of a WordPress blog.
This cool effect can be done if you already show your picture or images or logo whatsoever in your comment gravatar.
If you haven’t done so, you may want to check my how to show your avatar as a picture whenever you post a comment in another blog post.
This tutorial is coming from weblogtoolscollection.com news.
Showing an image in your avatar somehow looks more professional, and also a non-spam look.
It does not have to be a picture of yourself, it can be site’s logo, or anything you like.
It also gives you some kind of identity. More cool, that’s it.
If you are my regular reader, you may notice, i disabled showing gravatar, because i want to increase my site’s speed, so that my visitors can load it nicely, and fast.
But i apply this effect in web6.org, if you want to see the demo, see: http://www.web6.org/blogging-tips/my-beautiful-bloggers-lists.html
So let’s go down to business- adding this hover effect (hover cards) javascript to your blog.
Video HD:
I use Twenty Ten theme for this video tutorial, but of course any other themes which have functions.php file.
1. In your admin page, dashboard, find “Appearance” → Editor.
2. Find theme functions which is functions.php file. Click on that file.
Be careful with adding something in functions.php, if it causes an error, fix it in cPanel.
3. Add this following code:
//Add hover effects in comment avatar
wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', true );
4. Update file.
Now refresh your blog, it should show the cool effect. If it’s not yet showing, clean your browser’s cache. Show it off! 😀
This is really a Good tutorial. I will try it for my comment system. Thanks for sharing.. 🙂
You’re most welcome Pankaj!
I will visit to see how it is applied 😀
Thanks for visiting and leaving a nice comment.
I liked the hover effect and it adds more value too. Should I install this code too, I’ve already loads of there. OMG!
Yes!
I have checked the hover effect in your site, it looks cool, especially your top commentators too.
Since this hovers thing shows up, i edit my profile in gravatar, so it doesn’t look empty when people hover on my pic 🙂
Thanks for visiting yesterday!
Nice! Kimi.
My readers would love to know about this especially since this is great for regular themes. However, how would I put it in Thesis? 😛 Would love your help on this! Thanks a bunch!
Thu
Just add in custom_functions.php Thu =) oh and don’t forget to click “big a$$ button” ahaha!
Let me know if it helps.
Thanks for commenting..
Haha,
Now that would help huh? Hmmm, now my commentators avatars aren’t popping up like polariods only mine is for the headline. Maybe some interference with lazy loading? 🙂
Thu,
I have checked your blog, the top commentators show but others don’t.
It can be possibly caused by another javascript in your blog, i notice you have alot of them.
Because i use Thesis too in web6.org, and it worked well.
Probably you want to remove some pop up, like the toolbar to try if it then works?
Alright!
Hmmmm, well that’ll work. Wouldn’t want to mess too much with the scripts and yeah, a lot of JSs. 😛 THANKS so much Kimi!
Talk soon!
Thu
ahaha yeah. Lots of JS =P However it looks cool though.
You’re most welcome Thu, thanks for visiting today. See you around 😀
Wow.. Great find… will do it for ma blog asap 🙂
thanks a ton
You’re welcome good luck 😀
There is something to remember though, many javascripts can slow down the site, this is why i don’t apply on this blog but my other blog.
Thanks for visiting and leaving a comment Vishal!
Nice tutorial. But how will you fix the functions.php errors from c-panel?
Hey Tanmay,
There are two ways, upload the fresh one from our theme files, or cleaning up the error code.
https://www.wpvidz.com/wordpress-fix-parse-error-functions-php/
Thanks for visiting.
Thats really great Kimi. I think I should give a try. but itsnt increase some queries in your database..?
Hey Rajesh,
I guess not, but it slows down our site. Even showing gravatar does, according to page speed.
Thanks for sharing Gravatar codes Kimi and i look for adding this hover cards to my blog very soon but with the help of plugin 😛
waiting for official plugin to release ASAP
You’re welcome Ajinkya,
Can’t wait to see the coolness of your blog 🙂
Kimi, That’s an awesome tutorial. I’ve never edited my PHP files but you make it look very easy. 🙂
I gave the video a thumbs up. I’d love to know what kind of mic you have. The sound quality is very clear.
I’m the CommentLuv plugin so when you hover over a commenter, their entire sexy profile panel shows up. It includes their gravatar, blog, bio, recent blogs they visited and their last 3 posts! Now that’s one heck of a hover card isn’t it? Did you ever think about installing CommentLuv?
Have a great day Kimi and I hope you accept my friend request on YouTube.
Hi Ileane!
Thanks so much for the thumb up, i notice it in my youtube dashboard =D
The mic is trust USB headphone, actually my second one, because my first one was broken. I loved the first one, because it was cheaper and also nice to use.
I did buy Trust USB headphone, because i also use mac book, mac book needs a USB external microphone. This is why i bought USB headphone.
If you want to try this Trust headphone, you may look to amazon, but choose the non-USB one, i bought mine in amazon too. (wait a min, i will look for it..)
I found it! Note, this link is not affiliate LOL. My first headset was “hama” it was also comfy to use and also has great quality, and affordable price: here is the quick link from amazon.co.uk, you may look in amazon.com → http://goo.gl/w5BW
Yes, the hover effect is so cool, that i agree.
Well i have installed CommentLuv plugin some months ago, but i already used many external javascript so i removed some plugin which use javascript including commentluv =(
I do this because i have many videos on this blog, so i want to increase the loading speed.
Thanks for visiting Ileane, and yes, of course i added you as a friend in YT. You have a nice day today! Thanks.
Anything that improves the looks and feel of my blog. Thanks for this tut. 🙂
You’re welcome 😉
Kimi, That’s an awesome tutorial. I’ve never edited my PHP files but you make it look very easy. 🙂
I gave the video a thumbs up. I’d love to know what kind of mic you have. The sound quality is very clear.
Hi watson,
Thank you for your nice words, and very glad you like it 🙂
My mic is Trust microphone.
Kind regards,
Kimi.
Great video! Its easy to follow and understandable. Thank you for your informative topics.
Cheers!
thanks a lot for the informative post. Keep it up
It also gives you some kind of identity. More cool, that’s it
Thanks for this tutorial about WordPress avatar. Keep it up.
Hi there, I have seen that on occasion this webpage renders a 500 server error. I thought you would be keen to know. All the best