2012-04-15

Textual description of firstImageUrl

Анимированная панель для блога

анимированная панель
С помощью этого виджета вы сможете обратиться к посетителям вашего блога, донести до них важную информацию, сделать объявление, рассказать о проходящем конкурсе в блоге. Вы можете вставить в эту панель чат, кнопки социальных закладок, вставить виджет Партнеры и многое другое.
Важная особенность виджета в том, что он экономит место вашего блога, и в то же время виден всем. Вы видите анимационную панель сейчас в моем блоге и ее анимированный скриншот в начале записи. Не знаю сколько она времени она пробудет здесь, поэтому даю ссылку на демо.
Как видно из демо виджета, вы можете сделать серию слайдов с раздвижным содержимым. Природа кода данного виджета – Jquery JavaScript.
Как добавить виджет анимированная панель в блог...
  1. Перейдите админ панели Blogger во вкладку “Шаблон” в раздел редактора HTML кода, расширьте шаблоны виджета и при помощи поиска (Ctrl + F) найдите код </head>
  2. Вставьте перед </head> следующий скрипт
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
  3. После тега </head> вставьте код
    <script src='http://bloggerblogwidgets.googlecode.com/files/jquery.slidePanel.min.js' type='text/javascript'/>
  4. Теперь вам нужно сгенерировать код. Для этого воспользуйтесь генератором.
    генератор_кодаРасшифрую что означают каждый пункт генератора:
    Trigger Background Color Цвет кнопки
    Trigger Hover Background Color Цвет кнопки при наведении на нее
    мышки
    Trigger Active Background Color Цвет активной кнопки после нажатия
    Trigger Font Color Цвет текста кнопки
    Trigger Font Size Размер текста на кнопке
    Trigger Position from TOP Расположение кнопки (расстояние от верха)
    Panel Content Background Color Цвет фона панели
    Panel Content Text Color Цвет текста панели
    Panel Content Width Ширина панели
    Panel Content Position from TOP Расположение панели (расстояние сверху в px)
    Floating Panel Плавающая панель
    Float (left or right) Расположение слева или справа
    Trigger Name Имя кнопки (название)
    Panel Content Содержимое панели (текст или коды)
  5. Вставьте сгенерированный код перед тегом </body> в редакторе html. Если вы использовали html коды в качестве содержимого панели, то рекомендую проверить их на правильность прежде, чем вставлять в редактор. Вставьте вначале сгенерированный код в блокноте, и посмотрите код перед тегом </div>. Он должен быть прописан без искажений. Почему это стоит сделать – я заметила, что коды ссылок искажаются после пропускание через генератор, другие коды не проверяла, но все может быть.
Так за пять несложных шага вы создадите анимированную панель для блога.

2 комментария :

Andrey Mirlyan комментирует...

Щас поставлю себе спасибки, как всегда все нужное)))

Перов Серей комментирует...

Интересная штука, жаль мне не понадобится.... Но пользователям своего блога дам ссылку на этот пост.... может кому пригодится... :-)

Спасибо

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности