+

Социальные кнопки в одну строку для uCoz

Социальные кнопки в одну строку для uCoz
Цена: БЕСПЛАТНО
Просмотров: 1145
Добавлено: 20.04.2014
Контакты: Автор (VK) (Онлайн)
Файл добавил: Alan_Writer
Архив шаблона: СКАЧАТЬ
Демо: Смотреть
Информация о материале
Социальные кнопки в одну строку для uCoz. Итак недавно случайно на одном сайте увидел кнопки "поделится" самых основных социальных сетей, которые там шли аккуратненько в один ряд и были вообще очень красиво сделаны.

Как я сразу понял по их внешнему виду - это были не оригинальные кнопки, то есть не те которые можно получить путем регистрации в инструментах разработчиков в каждой социальной сети, что очень долго и неудобно. Тут они были сделаны с помощью скрипта, небольшого html-кода, и собственного оформления. При этом как и у оригинальных, у них был счетчик поделившихся, в общем все как надо.

Поэтому я решил адаптировать их, поскольку это очень полезная вещь для любого сайта. А теперь еще и удобная и доступная. Для начала, предлагаю взглянуть на демо.

Установка социальных кнопок для uCoz

1. Скачайте архив и папки css, img, js со всем содержимым залейте в корень сайта. *Если такие папки у вас в файловом менеджере уже есть, то просто перекиньте все файлы из указанных папок архива - в соответствующие папки файлового менеджера.

2. Укажите в основных настройках значение тега DOCTYPE так:
Код
<!DOCTYPE html>

3. Далее поместите эти скрипты и стили в <head>:
Код
<link rel="stylesheet" href="/css/social-likes.css" type="text/css">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/social-likes.js"></script>

3. И последнее - сам код кнопок, ставьте по месту:
Код
<ul class="social-likes">
<li class="vkontakte" title="Поделиться ссылкой во Вконтакте">Поделиться</li>
<li class="facebook" title="Поделиться ссылкой на Фейсбуке">Нравится</li>
<li class="twitter" title="Поделиться ссылкой в Твиттере">Твитнуть</li>
<li class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Класс!</li>
<li class="mailru" title="Поделиться ссылкой в Моём мире">Нравится</li>
<li class="plusone" title="Поделиться ссылкой в Google+">Google+</li>
<li class="livejournal" title="Поделиться ссылкой в LiveJournal">LiveJournal</li>
<li class="pinterest" title="Поделиться ссылкой в Pinterest">Pinterest</li>
</ul>
*Если какая-то или какие-то кнопки вам не нужны, то просто удалите строку <li> с ней.

Ну вот и все! Надеюсь вам понравится. Если да, то ставьте лайк, комментируйте и подписывайтесь сукабля, хыыы!

Теги: кнопки поделится, Социальные кнопки, Кнопки социальных сетей для сайта, поделится для uCoz
Комментарии (0)