wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Hover Effect Comment Avatar WordPress

Tutorials

Hover Effect Comment Avatar WordPress

Last updated on February 18, 2017
Posted on October 18, 2010

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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! πŸ˜€

avatar comment gravatar image picture twentyten

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Rename “Home” Twenty Ten’s Tab
→ How To Use CommentLuv Enabled Sites For Backlinks

Comments

  1. Pankaj Gupta says

    October 18, 2010 at 8:39 am

    This is really a Good tutorial. I will try it for my comment system. Thanks for sharing.. πŸ™‚

    • Kimi says

      October 18, 2010 at 8:55 am

      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

    October 18, 2010 at 4:04 pm

    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

      October 19, 2010 at 8:22 am

      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

    October 19, 2010 at 8:02 am

    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

      October 19, 2010 at 8:24 am

      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

        October 19, 2010 at 8:48 am

        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

          October 19, 2010 at 9:04 am

          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

          October 19, 2010 at 8:02 pm

          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

            October 19, 2010 at 8:14 pm

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

            You’re most welcome Thu, thanks for visiting today. See you around πŸ˜€

  4. VISHAL says

    October 19, 2010 at 9:47 am

    Wow.. Great find… will do it for ma blog asap πŸ™‚

    thanks a ton

    • Kimi says

      October 19, 2010 at 10:04 am

      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!

  5. Tanmay says

    October 19, 2010 at 9:50 am

    Nice tutorial. But how will you fix the functions.php errors from c-panel?

    • Kimi says

      October 19, 2010 at 10:05 am

      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.

  6. Rajesh says

    October 19, 2010 at 11:02 am

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

    • Kimi says

      October 19, 2010 at 11:49 am

      Hey Rajesh,

      I guess not, but it slows down our site. Even showing gravatar does, according to page speed.

  7. Ajinkya@BLOG404 says

    October 20, 2010 at 12:08 am

    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

    • Kimi says

      October 20, 2010 at 7:36 am

      You’re welcome Ajinkya,

      Can’t wait to see the coolness of your blog πŸ™‚

  8. Ileane @ Basic Blog Tips says

    October 20, 2010 at 11:32 am

    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

      October 20, 2010 at 6:00 pm

      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.

  9. Mayank says

    October 28, 2010 at 7:02 pm

    Anything that improves the looks and feel of my blog. Thanks for this tut. πŸ™‚

    • Kimi says

      October 29, 2010 at 8:01 am

      You’re welcome πŸ˜‰

  10. watson says

    July 11, 2011 at 7:26 pm

    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

      July 12, 2011 at 7:38 pm

      Hi watson,

      Thank you for your nice words, and very glad you like it πŸ™‚

      My mic is Trust microphone.

      Kind regards,

      Kimi.

  11. Bruce says

    September 5, 2011 at 11:24 am

    Great video! Its easy to follow and understandable. Thank you for your informative topics.

    Cheers!

  12. Floyd says

    March 25, 2012 at 10:50 pm

    thanks a lot for the informative post. Keep it up

  13. dasiel says

    March 30, 2012 at 8:37 am

    It also gives you some kind of identity. More cool, that’s it

  14. John Stern says

    September 4, 2012 at 7:43 am

    Thanks for this tutorial about WordPress avatar. Keep it up.

  15. Jason Borkliy says

    March 4, 2014 at 9:12 am

    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.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2022 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept