Скрытые боковые панели на GSS.

Простая боковая панель на GSS выползающая при наведении курсора мышки.Преимущества гаджета простая установка и отсутствие JavaScript
затормаживающего загрузку страницы.Наличие скрытых панелей в дизайне блога вещь конечно не обязательная,но её присутствие нисколько не повредит и лишь позволит скрыть с виду некоторые элементы присутствие которых всё же необходимо.

Установка скрытой боковой панели.

Установка гаджета идентична всем остальным GSS-код добавляем в шаблон. НТМЛ-код в гаджет HTML/JavaScript или перед закрывающимся тегом боди. Хотя установка в гаджет более практична так как он будет у вас всегда под рукой и в любой момент можно будет добавить или изменить содержимое.А можно просто всё сразу же добавить в гаджет НТМЛ и ЯВА скрипт,что и советую сделать тем у кого навыков и знаний пока недостаточно.Для этих целей советую добавить один лишний не подписанный гаджет,чтобы его не было видно на странице и всё копировать туда,разделяя различные коды.

Ниже расположен весь код,который можно скопировать и вставить на свою страницу добавив лишь в указанном месте всё,что пожелаете на своё усмотрение.И в случае успешного добавления у вас на блоге появится панель,которая расположена слева от текста.

<style type="text/css"v-gol.ru="screen">
 #slideout {
 position: fixed;
 top: 140px;                       /*Место расположения на странице*/
 left: 0;
 width: 77px;
 padding: 7px 0;
 text-align: center;
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 -o-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-border-radius: 0 5px 5px 0;
 -moz-border-radius: 0 5px 5px 0;
 border-radius: 0 5px 5px 0;
 }/*@v-gol.ru*/
 #slideout_inner {
 position: fixed;
 top: 140px;                            /*Место расположения на странице*/
 left: -220px;                          /*Изменить если панель не закрывается*/
border:1px solid #0f557f;         /*Цвет рамки*/
 background: #ffffff;                /*Цвет фона*/
 width: 200px;                         /*Ширина блока*/
 padding: 1px;                          /*Размер рамки*/
 height: 250px;                        /*Высота блока*/
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 -o-transition-duration: 0.3s;
 transition-duration: 0.3s;
 text-align: left;
 -webkit-border-radius: 0 0 5px 0;
 -moz-border-radius: 0 0 5px 0;
 border-radius: 0 0 5px 0;
 } #slideout:hover {
 left: 210px;      
 } #slideout:hover #slideout_inner {
 left: 0;
 }  </style>

<div id="slideout"><img src="http://fytzal.ru/wp-content/uploads/2014/01/v-gol.ru_.png" />
<div id="slideout_inner"> Ваш код,ссылки,кнопки картинки и т.д и т.п. </div></div>

Как установить гаджет для выделения текста

Настройки выползающего гаджета.

Настраивать можно высоту, ширину,расположение на странице.Для удобства визуального восприятия и ориентирования они подписаны,но они не будут мешать и код копировать можно вместе с ними.Картинку информер,на выскальзывающей боковой панели, можно поменять на свою заменив адрес выделенный жёлтым.

---