С помощью этого виджета вы сможете обратиться к посетителям вашего блога, донести до них важную информацию, сделать объявление, рассказать о проходящем конкурсе в блоге. Вы можете вставить в эту панель чат, кнопки социальных закладок, вставить виджет Партнеры и многое другое.
Важная особенность виджета в том, что он экономит место вашего блога, и в то же время виден всем. Вы видите анимационную панель сейчас в моем блоге и ее анимированный скриншот в начале записи. Не знаю сколько она времени она пробудет здесь, поэтому даю ссылку на демо.
Как видно из демо виджета, вы можете сделать серию слайдов с раздвижным содержимым. Природа кода данного виджета – Jquery JavaScript.
Как добавить виджет анимированная панель в блог...
- Перейдите админ панели Blogger во вкладку “Шаблон” в раздел редактора HTML кода, расширьте шаблоны виджета и при помощи поиска (Ctrl + F) найдите код </head>
- Вставьте перед </head> следующий скрипт
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
- После тега </head> вставьте код
<script src='http://bloggerblogwidgets.googlecode.com/files/jquery.slidePanel.min.js' type='text/javascript'/>
- Теперь вам нужно сгенерировать код. Для этого воспользуйтесь генератором.
Расшифрую что означают каждый пункт генератора:
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 Содержимое панели (текст или коды) - Вставьте сгенерированный код перед тегом </body> в редакторе html. Если вы использовали html коды в качестве содержимого панели, то рекомендую проверить их на правильность прежде, чем вставлять в редактор. Вставьте вначале сгенерированный код в блокноте, и посмотрите код перед тегом </div>. Он должен быть прописан без искажений. Почему это стоит сделать – я заметила, что коды ссылок искажаются после пропускание через генератор, другие коды не проверяла, но все может быть.
Так за пять несложных шага вы создадите анимированную панель для блога.
Щас поставлю себе спасибки, как всегда все нужное)))
Интересная штука, жаль мне не понадобится.... Но пользователям своего блога дам ссылку на этот пост.... может кому пригодится... 🙂
Спасибо