« Кнопка "Поделиться" через социальную сеть »

Описание материала:

Кнопка сочетающая в себе четыре кнопки для возможности поделиться веб-страницей с пользователями социальных сетей. В качестве иконок используется шрифт FontAwesome. Останется лишь прикрутить линки на сами сервисы.

Установка:

1. Скачиваем архив с нашего сайта и загружаем папку share в корень своего сайта.
2. Вставьте это в head страницы.

Код
  <link rel="stylesheet" href="/share/share.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>

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>

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>


Скачать ( Размер архива 2.2 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: maksim | Категория: Кнопки и иконки | Просмотров: 563 | Загрузок: 19


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев к материалу: 0
avatar