• 1748
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Наткнулся на симпотичную реализацию социальных кнопок.Кнопки появляются только при выделении определенного текста или нажатием на кнопку,это все можно посмотреть на демо.
Итак приступимю
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. распаковываем и заливаем в папку с шаблоном.
2.В head в main.tpl подключаем стили и скрипты.

Код:
<link rel="stylesheet" href="{tpl_url}/assets/stylesheets/normalize.css">
<link rel="stylesheet" href="{tpl_url}/assets/stylesheets/example.css">
<link rel="stylesheet" href="{tpl_url}/assets/stylesheets/arthref.css">
3.Кнопка вызова
Код:
<a href="#" class="btn followSelector">Поделиться</a>
4.Срабатывание на выделение текста
Код:
<p class="demo shareSelector">Привет! Я текст, и я здесь должен быть выбран. </p>
5. Перед /body
Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="{tpl_url}/assets/javascripts/socialShare.js"></script>
<script src="{tpl_url}/assets/javascripts/socialProfiles.js"></script>
<script>
$(document).ready(function () {

$('.shareSelector').socialShare({
social: 'facebook,twitter,google,pinterest,stumbleupon,delicious,friendfeed,digg,linkedin',
whenSelect: true,
selectContainer: '.shareSelector',
blur: true
});

$('.followSelector').socialProfiles({
animation: 'chain',
blur: true,
facebook: 'tolgaergin',
google: '102336483082058519992',
twitter: 'tolgaergin',
pinterest: 'tolga',
dribbble: 'bbb',
behance: 'gokhun',
scoutzie: 'gokhun-guneyhan'
});
});
</script>
Ну настройки можете посмотреть на источнике.Там все понятно.

Можешь почитать и вот эту статейку "Плавающий блок закладок"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element