Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Social Follow Widget With CSS Image Sprites
<style>
/*-----Social Follow-----*/
#follow{
border: 2px solid #ACA3A3;
padding: 5px 5px 5px 0px;
overflow: hidden;
display: inline-block;
}
#follow a{
width:32px;
height:32px;
margin:0 0 0 2px;
display:block;
float:left;
background:url(http://i.imgur.com/ARnVpCd.png) no-repeat 0 0;
line-height:0;
font-size:0;
color:transparent
}
#follow a:hover{
opacity:.5
}
#follow a.facebook{
background-position:0 -105px;
margin-left:9px!important
}
#follow a.twitter{
background-position:0 -70px
}
#follow a.gplus{
background-position:0 -140px
}
#follow a.rss{
background-position:0 -35px
}
#follow a.tube{
background-position:0 0
}
</style>
<!Simple Social Follow Widget Style Starts-->
<div id="follow" style="width:250px;margin:0 auto; border:none!important;">
<a class="facebook" href="https://www.facebook.com/iamshemul" rel="nofollow" title="Follow me on Facebook">Facebook</a>
<a class="twitter" href="http://twitter.com/shemul49rmc" rel="nofollow" title="Follow me on Twitter">Twitter</a>
<a class="gplus" href="http://plus.google.com/101611663127869024919" rel="nofollow" title="Follow me on Google Plus">Google Plus</a>
<a class="rss" href="http://feeds.feedburner.com/iamshemul" rel="nofollow" title="Subscribe To RSS">Subscribe To RSS</a>
<a class="tube" href="http://www.youtube.com/user/shemul49rmc" rel="nofollow" title="Follow me on YouTube">YouTube</a>
</div>
<!--follow ends-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment