Did you notice our new social media icons placed in sidebar ?
Place a pointer over it…cool isn’t it ?
Want to setup one like this ? 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.
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.
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.
Free social media icons setup
With some basic knowledge about CSS and HTML you can replace the default icons with your own social media icons and you can also place various other social media profile icons like YouTube,500px etc.
If you are not sure about doing it on your own,you can hire me to do it.
The next question on your mind might be: How much do you charge ?
Sorry,I am not going to do it for money…all I need you to do is Subscibe our Newsletter and share this article to your social media circles.
Thats it !!! Once you done it contact me through below form.
Cool, but you have to use sprites nowadays.
Yep..I have used two spirit icon.One for colored logos and other for grayscale icons.You can combine them to make a single spirit image.
Vivek R recently posted…Few WordPress Plugins to Manage Digital Downloads
I’m not comfortable using the code so for me the plugin is much easier. Then I don’t have to worry if I mess something up. I can just remove the plugin.
I try not to have too many of them though.
Thanks for the code – I’ll share it with my friends.
Ileane recently posted…Why You Should Start a Second Blog on Blogger
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 Downloads
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 Blog
Spot on, Vijesh….Just tested it for Chrome and Safari.I appreciate the effort you took to report the bug.
Now you can see the corrected code.I am on to merging the two image files.I will update it soon.
Thanks again.
Vivek R recently posted…10 Rocking WordPress Plugins that you might have missed
So now you are into learning CSS good. I like Chris Coyier in this area check that guys blog you will get lot of tips. By the way congrats PR3 in just 2 months, keep going. So did you see how lucky you are to get me, I started visiting your blog and you got a good page rank, Just Kidding don’t take it serious
Vijesh recently posted…5 Reasons why you need Photoshop go in hand with your Blog
Yeah..I learned CSS last year but didn’t master it.
Please visit my blog often so that I can get to 6 PR by next PR update.
Honestly I didn’t know how I got that but I have to improve it now.
Thans for dropping by.
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 ?
I didn’t get you Navneeet…Now also I have uploaded the spirit images in my blog only,if you dont want to upload into your theme folder then just upload it to your media gallery via WordPress dashboard and change the image link in CSS.
Sample CSS code after changing the image link
.socialfb
{
background: url(http://www.wpstuffs.com/wp-content/uploads/2013/02/social.png) no-repeat 0px 0px;
width: 49px;
height: 49px;
text-indent: -9999px;
float: left;
}
Vivek R recently posted…Free WordPress Theme which Looks like Windows 8 : 8Press
Okay! But I wanted you to do this from the beginning . So it will be easy for the beginners . As they don’t like messing too much with the files .
Navneet recently posted…Buying Links . Is it worth your money ?
There are some reasons for uploading it in your theme folder.
1.You won’t accidentally delete the image file
2.You dont need to change the Image link multiple times in the CSS.
Actually it will become much more difficult and time consuming then the current process if you upload it in media gallery.
My advice for beginners is to get used with these web standards.
Vivek R recently posted…Get Email only when someone replies to your comment : Fix WordPress comment system
Okay! You have good analytical reasoning . Are there any such icons for Sharing Purposes for WordPress . Hey! Don’t tell me about any plugins .
Navneet recently posted…Buying Links . Is it worth your money ?
You mean Social media icon sets,you can find some popular sets here – http://www.hongkiat.com/blog/free-social-media-icon-sets-best-of/
or google it for “Social media icons set” you will get loads of free sets.
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
Unfortunately Digg Digg has discontinued custom CSS feature but the plugin creator announced this feature in upcoming releases,so please wait for some time.
I will surely try this thing ( displaying floating social media icons) as per your request but I cannot guarantee it.I will mail you If I find any tutorials regarding this.
Vivek R recently posted…10 Rocking WordPress Plugins that you might have missed
Plugins are easy to install and handle. But, if you don’t know what you are doing, you may end up with unnecessary databases and a slow server. Instead, learning to handle CSS can save time and bandwidth. Thanks for the tip @Vivek
kcube recently posted…Protect Your Files Using Truecrypt
Rightly said karthick…As great quote says “Give a man a fish; you have fed him for today. Teach a man to fish; and you have fed him for a lifetime”…Im doing the later.
Thanks for sharing your opinion.
Vivek R recently posted…How to set Maximum number of Post Revisions without using a Plugin
Thanks for sharing the code, this is what exactly I am looking for.. I have a problem now.. I want that feature to be displayed like http://imgur.com/oy9t9wm but instead it is getting displayed as http://imgur.com/ZNU7Dz5 could you please help me with the fix..
Hi King just add
float:leftinside.social-media-icons.The resulting code should be
.social-media-icons
{
background-color: none;
width:100%;
height:80px;
float:left;
}
If it doesn’t work PM me here – vividvilla@gmail.com
Vivek R recently posted…All you need to know about : Post Revisions in WordPress
I still have the problem, sent you an email along with details.. could you please check and respond for the same..
This article provided good knowledge. Thanks for sharing this information.
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 Students