« Кнопка "Поделиться" через социальную сеть »
Описание материала:
Кнопка сочетающая в себе четыре кнопки для возможности поделиться веб-страницей с пользователями социальных сетей. В качестве иконок используется шрифт FontAwesome. Останется лишь прикрутить линки на сами сервисы.
Установка:
1. Скачиваем архив с нашего сайта и загружаем папку share в корень своего сайта.
2. Вставьте это в head страницы.
Код
<link rel="stylesheet" href="/share/share.css">
<link rel="stylesheet" href="/share/share1.css">
<link rel="stylesheet" href="/share/share1.css">
3. Вставьте этот html код где вы хотите видеть 1 пример
Код
<div class="cell ">
<div class="share-wrapper left">
<div class="rc10 share-action icon-share"></div>
<div class="share-container rc10">
<a class="share-btn tl icon-google-plus" href='#'></a>
<a class="share-btn tr icon-twitter" href='#'></a>
<a class="share-btn br icon-facebook" href='#'></a>
<a class="share-btn bl icon-pinterest" href='#'></a>
</div>
</div>
</div>
<div class="share-wrapper left">
<div class="rc10 share-action icon-share"></div>
<div class="share-container rc10">
<a class="share-btn tl icon-google-plus" href='#'></a>
<a class="share-btn tr icon-twitter" href='#'></a>
<a class="share-btn br icon-facebook" href='#'></a>
<a class="share-btn bl icon-pinterest" href='#'></a>
</div>
</div>
</div>
4. Вставьте этот html код где вы хотите видеть 2 пример
Код
<div class="cell">
<div class="share-wrapper below">
<div class="rc10 share-action icon-share"></div>
<div class="share-container rc10 ">
<a class="share-btn tl icon-google-plus" href='#'></a>
<a class="share-btn tr icon-twitter" href='#'></a>
<a class="share-btn br icon-facebook" href='#'></a>
<a class="share-btn bl icon-pinterest" href='#'></a>
</div>
</div>
</div>
<div class="share-wrapper below">
<div class="rc10 share-action icon-share"></div>
<div class="share-container rc10 ">
<a class="share-btn tl icon-google-plus" href='#'></a>
<a class="share-btn tr icon-twitter" href='#'></a>
<a class="share-btn br icon-facebook" href='#'></a>
<a class="share-btn bl icon-pinterest" href='#'></a>
</div>
</div>
</div>
5. Вставьте этот html код где вы хотите видеть 3 пример
Код
<div class="cell ">
<div class="share-wrapper right">
<div class="rc50 share-action icon-share"></div>
<div class="share-container rc50">
<a class="share-btn tl icon-google-plus" href='#'></a>
<a class="share-btn tr icon-twitter" href='#'></a>
<a class="share-btn br icon-facebook" href='#'></a>
<a class="share-btn bl icon-pinterest" href='#'></a>
</div>
</div>
</div>
<div class="share-wrapper right">
<div class="rc50 share-action icon-share"></div>
<div class="share-container rc50">
<a class="share-btn tl icon-google-plus" href='#'></a>
<a class="share-btn tr icon-twitter" href='#'></a>
<a class="share-btn br icon-facebook" href='#'></a>
<a class="share-btn bl icon-pinterest" href='#'></a>
</div>
</div>
</div>
Скачать ( Размер архива 2.2 Kb )
По данной ссылке, Вы можете скачать или купить архив данного материала
ДемонстрацияДемонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
Добавил: maksim | Категория: Кнопки и иконки | Просмотров: 982 | Загрузок: 24
Теги к материалу:
Поделиться в соц. сетях:
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |