fat-social-iconsWant to setup Social Media icons with hover effect ?  Just follow steps given below…believe me it won’t take more than five minutes.

You need not to use any plugin,all you need to do is place some codes on your current theme’s file.

Lets get started

Note that the below tutorials works on all kind of WordPress themes.(Yes..It also works on Thesis and Genesis )

1. Place a new text widget on sidebar (or place it wherever you want to show social icons).You can do this by visiting Dashboard >> Appearance >> Widgets

2. Copy the below code and paste it in text widget you have created.

Make sure that you have replaced the default url’s with your own social media profile links.


<div class="social-media-icons">

	<a class="social-header">Let's be Friends</a>

	<a href="http://facebook.com/wpstuffs" target="_blank" rel="nofollow" title="Facebook" class="socialfb">Facebook</a>

	<a href="https://twitter.com/wp_stuffs/" target="_blank" rel="nofollow" title="Twitter" class="socialtw">Twitter</a>

	<a href="https://plus.google.com/u/0/b/111632665869439509422/111632665869439509422" target="_blank" rel="nofollow" title="Google Plus" class="socialgp">Google Plus</a>

	<a href="http://pinterest.com/wpstuffs/" target="_blank" rel="nofollow" title="Pinterest" class="socialpin">Pinterest</a>

	<a href="http://feeds.feedburner.com/Wpstuffs" target="_blank" rel="nofollow" title="RSS" class="socialrss">RSS</a>

</div>

3.Now open style.css file of your current theme.(edit custom.css if your using Thesis theme).You can do this by using any FTP client such as Filezilla or edit through WordPress interface by visiting Dashboard >> Appearance >> Editor

Add the following code at the end of the file.

.social-media-icons 
{ 
	background-color: none;
	width:100%;
	height:80px;
}

.social-header 
{ 
	padding:0px 10px 2px 10px;
	background-color:#eee;
	color:#444; 	
}

.socialfb
{
         background: url(images/social.png) no-repeat 0px 0px; 
         width: 49px; 
         height: 49px; 
         text-indent: -9999px;  
         float: left;
}

.socialfb:hover
{ 
	background: url(images/social-bw.png) no-repeat 0 0px; 
	width: 49px; 
	height: 49px;
}

.socialtw
{
	background: url(images/social.png) no-repeat 0px -435px; 
	width: 49px; 
	height: 49px; 
	text-indent: -9999px;  
	float: left; 
	margin: 0 0 0 5px;
}

.socialtw:hover
{
	background: url(images/social-bw.png) no-repeat 0px -433px;
	width: 49px; height: 49px;
}

.socialgp
{
	background: url(images/social.png) no-repeat 0px -109px; 
	width: 49px; 
	height: 49px; 
	text-indent: -9999px;  
	float: left; 
	margin: 0 0 0 5px;
}

.socialgp:hover
{
	background: url(images/social-bw.png) no-repeat 0px -108px;
	width: 49px; 
	height: 49px;
}

.socialpin
{
	background: url(images/social.png) no-repeat 0px -218px; 
	width: 49px; 
	height: 49px; 
	text-indent: -9999px;  
	float: left; 
	margin: 0 0 0 5px;
}

.socialpin:hover
{
	background: url(images/social-bw.png) no-repeat 0px -217px;
	width: 49px; 
	height: 49px;
}

.socialrss
{
	background: url(images/social.png) no-repeat 0px -326px; 
	width: 49px; 
	height: 49px;
	text-indent: -9999px;  
	float: left; 
	margin: 0 0 0 5px;
}

.socialrss:hover
{
	background: url(images/social-bw.png) no-repeat 0px -325px;
	width: 49px; 
	height: 49px;
}

4. The final step is  to upload image files to your current theme’s ‘images’  folder.If you dont find any folder called ‘images‘ inside the theme folder then create a new folder and upload the following images to it.

[mybox] Download Image 1 | Download Image 2 [/mybox]

Note : Do not rename the image files, otherwise the icons won’t be displayed.

Thats it !! You have done it.

Now flush the cache if you use any plugins for caching and check the sidebar where you have placed the text widget.

If you followed the steps correctly you will surely get it working.If not then comment back so that I can help you to solve it.

Comments

  1. vikas saini says

    you should use this code for this

    p#rb_socialicons img {
    /* Spinning Social Icons Widget By Realcombiz */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    }

    p#rb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }

    /* Spinning Social Icons Widget By Realcombiz */



    vikas saini recently posted…Social Networking Site Project for College StudentsMy Profile

  2. says

    Thanks for this useful tip . But I want to know how to add moving social bookmarking buttons on the left side of the post . I want to add some social bookmarking buttons and I have use plugin like Digg Digg to do that but I am still missing some bookmarking site . So please let me know that how can I do this

  3. says

    Great Tutorial Bro …. I agree with you that installing silly plugins for small purposes is not good . It may delay the page load time . The next time what you could do is Upload those images to your blog and give us the link so we can also upload the same image directly through WordPress and place the link in the code . By doing this we can save the effort of opening FTP Client and uploading Images . If you do this , we can do a-z in WP dashboard only .
    Navneet recently posted…Buying Links . Is it worth your money ?My Profile

  4. says

    Nice Tutorial Vivek, You can create a single sprite instead of two images. Creating all the icons in a single sprite reduces the number of HTTP requests. You have added the icons in sidebar and footer widget but you need to keep checking in 2 to 3 browsers (CSS designers should check cross browser compatibility of the code). I think you have designed it using chrome. Check it in Firefox and Opera too background colour appears in them. Just add the following code and check. For Chrome it is ok.

    .social-media-icons {
    background-color: none;
    width:100%;
    height:80px;
    }

    Nice that you have started designing tips.
    Vijesh recently posted…5 Reasons why you need Photoshop go in hand with your BlogMy Profile

    • says

      I agree with you Ileane.Plugins are exactly made for that purpose only but in some cases going with code might prove valuable for example features which are not commonly needed but suits for particular niche blog.In that case you have to get your hand dirty.

      Actually Installing many plugins doesn’t decrease the performance…the plugins which are poorly coded and which makes too many database queries only slows down your website

      So no harm in using too many well coded plugins.
      Vivek R recently posted…Few WordPress Plugins to Manage Digital DownloadsMy Profile

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge