Содержимое архива загрузить в корневую папку сайта.
Вместо ваш_сайт.ру подставить адрес вашего сайта.
В архиве имеется демо скрипта.
HTML:
Код
<div class="soc-cod">
<a href="#" class="fa">Facebook</a>
<a href="#" class="vk">В контакте</a>
<a href="#" class="tv">Twitter</a>
<a href="#" class="lv">Live Journal</a>
<a href="#" class="od">Одноклассники</a>
<a href="#" class="ma">Mail.ru</a>
<a href="#" class="go">Google</a>
<a href="#" class="ya">Яндекс</a>
</div>
CSS:
Код
.soc-cod a {
width: 25px;
height: 25px;
margin: 0 3px;
float: left;
display: block;
overflow: hidden;
background: url(http://ваш_сайт.ру/sprite/1371892084_icon_sprite_1.png) no-repeat 0 0;
text-indent: -9999px;
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
-o-transition: all linear .3s;
transition: all linear .3s;
}
.soc-cod .fa {background-position: 0 0;}
.soc-cod .fa:hover {background-position: 0 -27px;}
.soc-cod .vk {background-position: -28px 0;}
.soc-cod .vk:hover {background-position: -28px -27px;}
.soc-cod .tv {background-position: -57px 0;}
.soc-cod .tv:hover {background-position: -57px -27px;}
.soc-cod .lv {background-position: -85px 0;}
.soc-cod .lv:hover {background-position: -85px -27px;}
.soc-cod .od {background-position: -113px 0;}
.soc-cod .od:hover {background-position: -113px -27px;}
.soc-cod .ma {background-position: -141px 0;}
.soc-cod .ma:hover {background-position: -141px -27px;}
.soc-cod .go {background-position: -168px 0;}
.soc-cod .go:hover {background-position: -168px -27px;}
.soc-cod .ya {background-position: -196px 0;}
.soc-cod .ya:hover {background-position: -196px -27px;}
