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

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

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

Можешь почитать и вот эту статейку "Файл robots.txt для NG CMS"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

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

Теги

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

Статистика

  • Caйту: 4822 дня
  • Новостей: 616
  • Комменты: 257
  • Зарегистрированно : 755
  • Онлайн всего: [5]
  • Гости: [4]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.316сек
  • Потребление памяти: 5.477 Mb 
  •   Яндекс.Метрика