Hover Effect Comment Avatar WordPress

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

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page