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

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

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

Можешь почитать и вот эту статейку "Отзывчивые вкладки,табы"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Теги

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

Статистика

  • Caйт cущecтвуeт: 4656 дней
  • Статических страниц: 10
  • Категорий: 28
  • Новостей: 619
  • Неопубликованных новостей: 8
  • Комментариев: 257
  • Зарегестрированных пользователей: 779
  • Онлайн всего: [10]
  • Гости: [10]
  • Сегодня нас посетили: [9] Google, Larrytitly, Яндекс, Яндекс, irbees2008, Google, dankeanke, Google, Google
  • SQL запросов: 42
  • Генерация страницы: 0.189сек
  • Потребление памяти: 9.274 Mb 
  •   Яндекс.Метрика