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