• 1561
  • 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>
Ну настройки можете посмотреть на источнике.Там все понятно.

Можешь почитать и вот эту статейку "Добавляем свои функции в стандартный bb- редактор для оформления новости"

mistakes

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

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

Ваше мнение

Ваше отношение к TWIG
Результаты

----