Хаки и Скрипты Next Generation CMS : Диалоги и lightbox, Кнопки и иконки, html, JS : Социальные кнопки с блур эффектом

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>

Ну настройки можете посмотреть на источнике.Там все понятно.

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

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

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