Хаки и Скрипты Next Generation CMS

Социальные кнопки с блур эффектом

irbees2008 irbees2008 Опубликовано - 28 - марта Диалоги и lightbox
3374 - 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>
Ну настройки можете посмотреть на источнике.Там все понятно.

Можешь почитать и вот эту статейку "Форматируем дату на твиге"

Опрос

Ваше мнение

TWIG -что это?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4612 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [34]
  • Гости: [33]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.344сек
  • Потребление памяти: 5.351 Mb 
  •   Яндекс.Метрика