wpvidZ

Learn WordPress With Video Tutorials

wpvidZ Blog Tutorials Hover Effect Comment Avatar WordPress

Tutorials

Hover Effect Comment Avatar WordPress

Last updated on
Posted on

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! 😀

Latest Posts

Comments

  1. Pankaj Gupta says

    This is really a Good tutorial. I will try it for my comment system. Thanks for sharing.. 🙂

    • Kimi says

      You’re most welcome Pankaj!

      I will visit to see how it is applied 😀

      Thanks for visiting and leaving a nice comment.

  2. Suresh Khanal says

    I liked the hover effect and it adds more value too. Should I install this code too, I’ve already loads of there. OMG!

    • Kimi says

      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!

  3. Thu Nguyen says

    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

    • Kimi says

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

      • Thu Nguyen says

        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? 🙂

        • Kimi says

          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?

        • Thu Nguyen says

          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

          • Kimi says

            ahaha yeah. Lots of JS =P However it looks cool though.

            You’re most welcome Thu, thanks for visiting today. See you around 😀

    • Kimi says

      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!

  6. Rajesh says

    Thats really great Kimi. I think I should give a try. but itsnt increase some queries in your database..?

  7. Ajinkya@BLOG404 says

    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

  8. Ileane @ Basic Blog Tips says

    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.

    • Kimi says

      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.

  10. watson says

    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.

    • Kimi says

      Hi watson,

      Thank you for your nice words, and very glad you like it 🙂

      My mic is Trust microphone.

      Kind regards,

      Kimi.

  15. Jason Borkliy says

    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

Comment form on this post is closed after 60 days.