Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Социальные кнопки
Социальные кнопки
AndreyДата: Четверг, 05.12.2013, 16:30:50 | Сообщение # 1
Технарь
Offline
3

Кнопки социальных сетей с прикольным эффектом при наведении

Смотрим мой тест на Фиддле

Теперь приступим к установки!

Для начала идём в CSS и вставляем:
Код
#sharing_buttons a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}     
#sharing_buttons a{filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}     
.sps-small a{width:20px;height:20px;margin-right:6px;background:url('/imegаs/buttons.png') 0 0 transparent no-repeat;}     
.sps-small a:last-child{margin-right:0;}#sharing_buttons     
.sps-small   
.sps-vkontakte{background-position:-80px -20px;}#sharing_buttons     
.sps-small   
.sps-vkontakte:hover{background-position:-80px 0;}#sharing_buttons     
.sps-small   
.sps-odnoklassniki{background-position:-60px -20px;}#sharing_buttons     
.sps-small   
.sps-odnoklassniki:hover{background-position:-60px 0;}#sharing_buttons     
.sps-small .sps-facebook{background-position:0 -20px;}#sharing_buttons     
.sps-small   
.sps-facebook:hover{background-position:0 0;}#sharing_buttons     
.sps-small   
.sps-twitter{background-position:-20px -20px;}#sharing_buttons     
.sps-small   
.sps-twitter:hover{background-position:-20px 0;}#sharing_buttons     
.sps-small   
.sps-moimir{background-position:-140px -20px;}#sharing_buttons     
.sps-small   
.sps-moimir:hover{background-position:-140px 0;}#sharing_buttons     
.sps-small   
.sps-livejournal{background-position:-160px -20px;}#sharing_buttons     
.sps-small   
.sps-livejournal:hover{background-position:-160px 0;}#sharing_buttons     
.sps-small   
.sps-google{background-position:-120px -20px;}#sharing_buttons     
.sps-small   
.sps-google:hover{background-position:-120px 0;}#sharing_buttons     
.sps-small   
.sps-email{background-position:-440px -20px;}#sharing_buttons     
.sps a{display:inline-block;}     
.sps{display:inline-block;position:relative;z-index:1;padding:5px;background:transparent;font-size:0;line-height:0;text-align:left;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}


Вставляем там где хотим видеть Соц. кнопки:
Код
<div id="sharing_buttons" style="text-align:center;">
<div class="sps sps-theme-color sps-small">     
<a class="sps-vkontakte" href="http://vk.com/" title="ВКонтакте" target="_blank"></a>     
<a class="sps-odnoklassniki" href="http://www.odnoklassniki.ru/" title="Одноклассники" target="_blank"></a>     
<a class="sps-facebook" href="https://www.facebook.com/" title="Facebook" target="_blank"></a>     
<a class="sps-twitter" href="https://twitter.com/" title="Twitter" target="_blank"></a>
<a class="sps-moimir" href="http://my.mail.ru/" title="Мой Мир@Mail.Ru" target="_blank"></a>     
<a class="sps-livejournal" href="http://www.livejournal.com/" title="LiveJournal" target="_blank"></a>     
<a class="sps-google" href="https://plus.google.com/" title="Google+" target="_blank"></a>     
<a class="sps-email" href="$HOME_PAGE_LINK$" title="Отправить на email" onclick="window.open(this.href, 'mailto');"></a>
</div>
</div>


Картинку buttons заливаем в папку "imegаs":


Всё, установка завершена!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Социальные кнопки
Страница 1 из 11
Поиск: