Добавляем раздвижную панель с виджетами в свой блог

Сегодня мы рассмотрим способ как добавить анимационную раздвижную панель с виджетом (сделанную на Jquery) в блоге на платформе Blogger.

Это плагин был разработан Джоном Филлипсом, совместно jQeasy.
Главной особенностью является то, что мы можем показать любой контент более простом и удобном формате, и в результате получаем эффективный и привлекательный эффект анимации при нажатии кнопки.

Пример можно просмотреть вот на этом блоге .


Как установить плагин:


Шаг 1. Добавляем  Jquery JavaScript библиотеку (если вы уже добавили, то можете пропустить данный шаг).

- выбираем Настроить - Дизайн - Редактировать html;
- Находим в коде  тег </head>;
- Перед ним вставляем следующий код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Шаг 2. Добавляем плагин Jquery Slide Panel Plugin

Аналогичным предыдущему способом вставляем еще один код:

<script src="http://bloggerblogwidgets.googlecode.com/files/jquery.slidePanel.min.js" type="text/javascript"></script>

Шаг 3. Добавляем код панели

- генерируем код здесь
- или добавляем перед тегом </body>, следующий код:

<style type="text/css"> a.w2btrig605{position: absolute;background:#88BBD4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOyt48EFy8O3gOcP8QbS4vbCtqWRUrfzVzkMa_vYwc9_Vbs02-4dg5jjBxi729VASTAhLI9AXyMtBdlqkw1sl2c8mKcq1NgCb18ZaRejx0vurm2zxfZuk3-di4QiSx7pht92YmtMFtq_m/s143/w2b_plus.png) 6% 50% no-repeat;text-decoration: none;font-size: 14px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#FFFFFF;padding:4px 12px 6px 24px;font-weight: bold;z-index:99999;} a.w2btrig605.left {left: 0;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-bottomright: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;} a.w2btrig605:hover {background-color:#5599BB;} a.active.w2btrig605 {background:#666666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7cayUHbuy04_vpW6pg8YeFf56C88RQvgAtbDlsfEDX3-ebO68u_PfNUq18syfo4jpqltdXdMkWq8bonohbEsbyleAy9ornbFJCZr0k2U0NfrTdkqWUjt5_s_4MnLSp3cQs6c8iaZfzgFM/s143/w2b_minus.png) 6% 50% no-repeat;} .w2bpane605 {color:#CCCCCC;position: absolute;display: none;background: #000000;width: 300px;height: auto;z-index:99997;} .w2bpane605.left {left: 0;padding: 20px 30px 20px 100px;border-top-right-radius: 15px;-moz-border-radius-topright: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-bottomright: 15px;-webkit-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;} </style><br /> <script type="text/javascript"> $(document).ready(function(){ $('#myw2bpane605').slidePanel({ triggerName: '#myw2btrig605', triggerTopPos: '20px', panelTopPos: '10px' }); }); </script><br /> <a href="#" id="myw2btrig605" class="w2btrig605 left">Виджет</a><br /> <div id="myw2bpane605" class="w2bpane605 left">Содержимое панели ( сюда можно вставить текст, html код )<br /> </div>

- сохраняем шаблон и изменения



Следует заметить что в коде каждой панели присваивается уникальный идентификатор с помощь этого можно создать сколько угодно таких панелей и настроить внешний вид.