Главная » 2013 » Март » 6 » Кнопки соцсетей (Скрипты для ucoz)
06.03.2013, 22:01

Кнопки соцсетей




Немаловажной частью на сайте являются кнопки "Поделиться в соц. сетях". Но далеко не все, кто создает на своем сайте такие кнопки, задумывается об их дизайне, поэтому вот вам один из вариантов.

1. В таблицу стилей (CSS) вставляем стили:
Код
/* All */
.share {text-align:center;margin:7px 5px;font:bold 12px/32px Arial,Verdana,sans-serif;padding:0 15px;border-radius:3px;background:url('/img/share_bg.png')}
.share:hover {box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 0 0 50px rgba(255,255,255,0.1);}
.share:active {box-shadow:inset 0 2px 5px rgba(0,0,0,0.1);}
.share a {display:block;color:#fff;text-decoration:none;}
.share a:before {width:37px;height:31px;margin:1px 5px 0 -10px;content:'';display:block;float:left;top:3px;font:0/0 arial;background:url('/img/share_ico.png');}
.share.one {float:left;}
.share.two {float:left;width:45%;}
/* Google */
.google {background-position:0 0;border:1px solid #77251b;padding-left:15px;}
.share.google a {text-shadow:0 1px #9d2f23;}
.share.google a:before {background-position:0 0;}
/* Twitter */
.twitter {background-position:0 -64px;border:1px solid #448ca6;}
.share.twitter a {text-shadow:0 1px #4296b7;}
.share.twitter a:before {background-position:0 -62px;}
/* Facebook */
.facebook {background-position:0 -32px;border:1px solid #344f89;}
.share.facebook a {text-shadow:0 1px #2e467a;}
.share.facebook a:before {background-position:0 -31px;}
/* VK */
.share.vk {background-position:0 -96px;border:1px solid #23405b;}
.share.vk a {text-shadow:0 1px #2a4d6e;}
.share.vk a:before {background-position:0 -93px;}


2. Загружаем изображения из архива в папку "img".
3. В нужное место вставляем кнопки:

Код
<div class="share google"><a href="LINK">Поделиться в Google</a></div>
<div class="share facebook"><a href="LINK">Поделиться в Facebook</a></div>
<div class="share twitter"><a href="LINK">Поделиться в Twitter</a></div>
<div class="share vk"><a href="LINK">Поделиться ВКонтакте</a></div>

"LINK" замените на ссылку, по которой будет осуществлен переход на страницу "Поделиться".
Установка завершена. Теперь рассмотрим настройки отображения наших кнопок.
Настройка отображения кнопок
Код

<div class="share сеть тип "><a href="LINK">Поделиться в Google</a></div>

сеть - выбор соц. сети. (google, facebook, twitter, vk).
тип - вид отображения кнопок (one - кнопки располагаются в ряд, размер не зафиксирован. two - кнопки располагаются в 2 колонки, ширина фиксированная). Не указывайте ничего, если хотите, чтобы кнопки растягивались на всю ширину. При указании вида отображения после всех кнопок нужно вставить следующий код:

Код
<div style="clear:both;"></div>
Материал взят с сайта infoscript.ru
Теги: Скачать Кнопки соцсетей
Скачать "Кнопки соцсетей"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://web41k.ru
Категория: Скрипты uCoz | Просмотров: 2614 | Добавил: sold93 | Рейтинг: 5.0/3 |
Теги: соцсете, кнопки
Всего комментариев: 2
1 antisept -Infoscript Team-  (16.03.2013 12:59)
Аватар пользователя
Отлично smile

2 naldo   (23.03.2013 11:08)
Аватар пользователя
1) помогите разобраться с кнопками, как вставить ссылки на сети? для меня это трудно, во всех этих соцсетях даются ссылки со своими кнопками, откуда верно взять ссылку?

2) Вариант one как оцентровать, никак не получается?

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]