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

irbees2008 Опубликовано - 28 - марта Диалоги и lightbox

Адаптировал: 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>