Additional menu

Crunchify

Largest free Technical and Blogging resource site for Beginner. We help clients transform their great ideas into reality!

Crunchify   Social Media References   How to Implement Social Media Icons on WordPress Site – Cool Mou ...

How to Implement Social Media Icons on WordPress Site – Cool Mouse Hover Social Media Buttons

Updated on by App   9

Hand holding a Social Media 3d Sphere

Hello Guys, I here once again with a new Social Media Buttons widget for WordPress. The widget is unique and attractive with a nice hover effect. It includes all major social network’s buttons and does not slow down your blog.

Click here for Demo

Now lets get started.

Step-1

Download icons from here.

https://crunchify.com/wp-content/uploads/code/social.zip
Mouse Hove Social Media Icons

Step-2

Extract and put it under your theme’s image folder.

<blog>/wp-content/themes/images/social

Step-3

Add below CSS to your theme’s style.css  file.

.icons a {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 10px;
    vertical-align: middle;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

.icons a.twitter { background: url("images/social/twitter.png") left top no-repeat; }
.icons a.dribbble { background: url("images/social/dribbble.png") left top no-repeat; }
.icons a.rss { background: url("images/social/rss.png") left top no-repeat; }
.icons a.pinterest { background: url("images/social/pinterest.png") left top no-repeat; }
.icons a.digg { background: url("images/social/digg.png") left top no-repeat; }
.icons a.flickr { background: url("images/social/flickr.png") left top no-repeat; }
.icons a.forrst { background: url("images/social/forrst.png") left top no-repeat; }
.icons a.vimeo { background: url("images/social/vimeo.png") left top no-repeat; }
.icons a.reddit { background: url("images/social/reddit.png") left top no-repeat; }
.icons a.linkedin { background: url("images/social/linkedin.png") left top no-repeat; }
.icons a.facebook { background: url("images/social/facebook.png") left top no-repeat; }
.icons a.paypal { background: url("images/social/paypal.png") left top no-repeat; }
.icons a.stumbleupon { background: url("images/social/stumbleupon.png") left top no-repeat; }
.icons a.email { background: url("images/social/email.png") left top no-repeat; }
.icons a.deviantart { background: url("images/social/deviantart.png") left top no-repeat; }
.icons a.netvibes { background: url("images/social/netvibes.png") left top no-repeat; }
.icons a.yahoo { background: url("images/social/yahoo.png") left top no-repeat; }
.icons a.github { background: url("images/social/github.png") left top no-repeat; }
.icons a.addthis { background: url("images/social/addthis.png") left top no-repeat; }
.icons a.behance { background: url("images/social/behance.png") left top no-repeat; }
.icons a.blogger { background: url("images/social/blogger.png") left top no-repeat; }
.icons a.slashdot { background: url("images/social/slashdot.png") left top no-repeat; }
.icons a.technorati { background: url("images/social/technorati.png") left top no-repeat; }
.icons a.googleplus { background: url("images/social/googleplus.png") left top no-repeat; }
.icons a.apple { background: url("images/social/apple.png") left top no-repeat; }
.icons a.myspace { background: url("images/social/myspace.png") left top no-repeat; }
.icons a.sharethis { background: url("images/social/sharethis.png") left top no-repeat; }
.icons a.yelp { background: url("images/social/yelp.png") left top no-repeat; }
.icons a.delicious { background: url("images/social/delicious.png") left top no-repeat; }
.icons a.lastfm { background: url("images/social/lastfm.png") left top no-repeat; }
.icons a.youtube { background: url("images/social/youtube.png") left top no-repeat; }
.icons a.skype { background: url("images/social/skype.png") left top no-repeat; }
.icons a.tumblr { background: url("images/social/tumblr.png") left top no-repeat; }
.icons a.aim { background: url("images/social/aim.png") left top no-repeat; }
.icons a.google { background: url("images/social/google.png") left top no-repeat; }

.icons a:hover { background-position: left -34px; }

Step-4

Go to Sidebar Widget add below code.

<div class="icons">
    <a class="twitter" href="http://twitter.com/Crunchify" target="_blank"></a>
    <a class="facebook" href="http://facebook.com/Crunchify" target="_blank"></a>
    <a class="googleplus" href="https://plus.google.com/+CrunchifyDotCom" target="_blank"></a>
    <a class="pinterest" href="https://www.pinterest.com/Crunchify/crunchify-articles" target="_blank"></a>
    <a class="rss" href="https://crunchify.com/feed/" target="_blank"></a>
    <a class="email" href="https://crunchify.com/newsletter/" target="_blank"></a>
</div>

And you are all set. Make sure you update your Social media links.

If you liked this article, then please share it on social media. Have a question or suggestion? Please leave a comment to start the discussion.

Suggested Articles...

  1. How to add FontAwesome Fonts to WordPress without any Plugin?
  2. How to create simple Social Follow WordPress Buttons? Social Media CSS Sprite Tips
  3. Create Super fast Social Sharing Buttons without JavaScript with simple CSS
  4. How to Setup WordPress & AMP: Accelerated Mobile Pages: Setup Analytics, AdSense, Social Media Guide Attached
  5. WordPress Plugins We Use on Crunchify: Favorite and must have Plugins – Want to Know Why?
  6. Create Cool Previous-Next Post Navigation Button for WordPress Blog – just using CSS without JavaScript

About App

I'm an Engineer by profession, Blogger by passion & Founder of Crunchify, LLC, the largest free blogging & technical resource site for beginners. Love SEO, SaaS, #webperf, WordPress, Java. With over 16 millions+ pageviews/month, Crunchify has changed the life of over thousands of individual around the globe teaching Java & Web Tech for FREE.

Reader Interactions

  9 Comments...

  1. Liana Ghazarian Messerlin says

    I didn’t manage to make the icons appear. Maybe you could help me. I have a child theme. I tried to put the images both in parent theme/images and I also created Images in child theme and added there the social folder. I tried to put the code in child theme styles css, but did not work, then i put in parent styles.css, still nothing happened. Then there is part of widget where I am lost (i am new to this). I put the code in sidebar.php of parent theme, nothing happened. Then, from Appearance, I added a text widget to the sidebar in which i put the code, but still, nothing happenes. I can see the title of the widget but not the icons.

    Reply

    • App Shah says

      Hi Liana – you need to just put icons into Child theme’s /images/social folder. Also, try adding it to your widget rather changing sidebar.php file.

      Reply

      • Liana Ghazarian Messerlin says

        Hi, now the code worked except for the fact that I do not see the icons. The widget is there, and I accidentally discovered that the icons are there too (accidentaly clicked and now I can see that on the blank space below, the mouse pointer becomes a hand). But it is as if both the icons and the hover color were set to white. Also icons are organized in a column and not a row.

        Reply

      • Liana Ghazarian Messerlin says

        Hi, I did what you wrote. I think it is working. The only problem is that I can see there are “things” to click organised in a colums, I can see the mouse pointer become a hand, but I cannot see actual icons. It is like the icon color and the hover colors are white. I checked, the files are there in images/social. The folders permission is 755, the permission for images is 644. No idea if this changes anything.

        Reply

        • App Shah says

          Hi Liana. Sorry for late reply. It should work out of the box ideally but might be some minor issue like cache refresh or path location related to your blog.

          In order for that to fix I need login permission to your blog and we could do that via WordPress premium service what we are offering.

          Reply

Leave a Reply

Comment Policy: We welcome relevant and respectful comments. All comments are manually moderated and those deemed to be spam or solely promotional will be deleted.