Previously I wrote a quick Cool Mouse Hover Social Media Buttons for WordPress Blog tutorial. And yes, this is another cool mouse hover Social Media example which uses CSS Sprite.
Why Use CSS Image Sprite?
Every time you call an image with the CSS background-image selector an HTTP request is made. Put simply, the more HTTP requests you make the slower your site, and that can be disastrous for search engine rankings. The answer to this problem is the CSS Sprite.
A CSS sprite is a graphic which includes other graphics to be used (and re-used) on your site, so rather than using individual images each time you need to change a background with CSS, you use just one sprite. This reduces HTTP requests and keeps your site super fast.
Another must read: Implement Social Sharing Button
We will go over Two Methods.
- Method-1: Which we used until 08.31.2016.
- Method-2: Which I used on Crunchify.com in 2015.
- Method-3: Use
fontawesome.io. Please follow FontAwesome detailed Tutorial.
Let’s get started:
Example-1
Step-1
CSS sprite image: https://crunchify.com/wp-content/icon/crunchify-follow-sprite.png. Download and put it under your theme’s /image/ folder. You will refer this in CSS file.
Step-2
Go to Widget Area and Add Text Widget and put below code. Change links accordingly.
<div class="sidebox sidebox-social"> <a class="sm-rss" href="https://crunchify.com/feed/" rel="external" target="_blank">RSS Feed</a> <a class="sm-goo" href="https://www.youtube.com/c/CrunchifyDotCom?sub_confirmation=1" rel="publisher" target="_blank">YouTube</a> <a class="sm-fac" href="https://www.facebook.com/Crunchify" target="_blank">Facebook</a> <a class="sm-twi" href="http://twitter.com/Crunchify" target="_blank">Twitter</a> <a class="sm-wor" href="http://profiles.wordpress.org/crunchify/" target="_blank">WordPress.org</a> </div>
Step-3
Go to theme’s style.css file and put below CSS for your better styling.
.sidebox-social {
padding: 0 0 5px 0;
}
.sidebox {
width: 100%;
overflow: hidden;
margin: 0px 0px 15px 0px;
min-width: 300px;
}
.sidebox-social a:link, .sidebox-social a:visited, .sidebox-social a:hover, .sidebox-social a:active {
float: left;
width: 32px;
height: 32px;
margin: 10px 15px 10px 12px;
padding: 0;
text-indent: -9999em;
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
background-color: transparent;
background-image: url('images/crunchify-follow-sprite.png');
background-repeat: no-repeat;
}
.sm-rss {
background-position: 0 0;
}
.sm-goo {
background-position: 0 -32px;
}
.sm-fac {
background-position: 0 -64px;
}
.sm-twi {
background-position: 0 -160px;
}
.sm-wor {
background-position: 0 -192px;
}
That’s it. Now let’s move to 2nd example which I’m not using it right now but it works well also if you like.
Example-2
Step-1
CSS sprite image: https://crunchify.com/wp-content/icon/social-icons.png. You need this in CSS file. Put this image into theme’s /images/folder.
Step-2
Put this code where you want social icon to appear, i.e. Text Widget Area. Change links accordingly.
<ul id="social">
<li><a href="http://twitter.com/Crunchify" id="tw" rel="me" target="_blank">Twitter</a></li>
<li><a href="http://www.facebook.com/Crunchify" id="fb" rel="me" target="_blank">Facebook</a></li>
<li><a href="https://www.google.com/+CrunchifyDotCom" id="plus" rel="me author" target="_blank">Google+</a></li>
<li><a href="https://crunchify.com/feed/" id="rss" rel="me" target="_blank">RSS</a></li>
</ul>
Step-3
Put below css code to your WordPress style.css file:
/* Social Icons
------------------------------------------------------------ */
#social{
float: left;
margin: 22px 0 0 10px;
margin-left: 35px !important;
}
#social li {
float: left;
border-bottom: none !important;
list-style-type: none !important;
}
#social li a{
float: left;
height: 23px;
width: 23px;
text-indent: -9999px;
overflow: hidden;
background: url('images/social-icons.png');
}
#social #tw{
background-position: 0 0;
}
#social #tw:hover{
background-position: 0 -23px;
}
#social #fb{
background-position: -23px 0;
}
#social #fb:hover{
background-position: -23px -23px;
}
#social #rss{
background-position: -46px 0;
}
#social #rss:hover{
background-position: -46px -23px;
}
#social #plus{
background-position: -69px 0;
}
#social #plus:hover{
background-position: -69px -69px;
}
That’s it and you are all set.