Плагин jQuery - SlideNote

Плагин jQuery - SlideNote

SlideNote - это настраиваемый, простой плагин jQuery, который выводит выскальзывающее окно с сообщением.

• Создание
  

Первый шаг - это создание и настройка скрипта. "Настройка" в нашем случае - это вставка желаемого текста и параметров:

<div class='slidenote' id='leftNote'>

      <h2> Вы не авторизованы на сайте</h2>
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем вам зарегистрироваться или авторизоваться на сайте, для получение всех возможностей работы в системе. . .
    </div>
    <script type='text/javascript'>
$(&#39;#leftNote&#39;).slideNote({
  corner: &#39;right&#39;,
  where: 20,
    closeImage: &#39;http://bloggerhelp.ru/uploads/demo/slidenotes/images/slidenote.close.png&#39;,
    displayCount: 3
});
    </script> Вместо текста - вставьте вашу заметку.
Если вы желаете чтобы ваша заметка появлялось определённое количество раз вы должны изменить параметр указанный коричневым текстом. К примеру 1 или 50.
Для изменение позиции вы должны изменит параметр указанный красным текстом. К примеру right или left.

• Установка

1. Зайдите в Дизайн ---> Изменить HTML
1.1 С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:

</body>

2. Перед ней поставьте этот код {к примеру}:

<div class='slidenote' id='leftNote'>

      <h2> Вы не авторизованы на сайте</h2>
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем вам зарегистрироваться или авторизоваться на сайте, для получение всех возможностей работы в системе. . .
    </div>
    <script type="text/javascript">
$('#leftNote').slideNote({
  corner: 'right',
  where: 20,
    closeImage: 'http://bloggerhelp.ru/uploads/demo/slidenotes/images/slidenote.close.png',
    displayCount: 3
});
    </script> 3. С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:

]]></b:skin>

3.1 Вместо неё вставьте этот код:

.slidenote { width: 320px; height:150px; background: #FBEC78; padding: 1em; }

.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
.slidenote { -moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333; }
]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://bloggerhelp.ru/uploads/demo/slidenotes/js/jquery.slidenote.js' type='text/javascript'/> 4. Всё!

• Примечание

Если в вашем блоге данный плагин - работает или отображается неправильно - вы будете должны сделать "очистку шаблона" от скриптов "jQuery". Для этого вы должны:

1. Зайдите в Дизайн ---> Изменить HTML
1.1 С помощью поиска (Ctrl+F) вам надо будет найти эту строку (-и) в вашем шаблоне:

ajax/libs/jquery

Вы должны найти такие строки (примеры):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> Так вот - все они должы быть стёрты! Также проверьте все гаджеты "HTML/javascript" - наличии в них данных строк.
Внимание! Должна остаться только одна страка такого ввида - а именно (строка из пункта 3.1):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>