Фиксированная боковая панель.


Фиксированный сайдбар fixed-sidebar


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




Для чего нужна фиксация боковой панели.


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

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


Независимая фиксированная боковая панель для ротации баннеров устанавливается просто.Скопировав приведённый справа код CSS можно добавить его или непосредственно в шаблон вашего блога,предварительно убрав теги  <style>....</style>,перед закрывающим тегом в шаблоне блога ]]></b:skin> ,а HTML часть состоящую из двух контейнеров (правого и левого) внести в гаджет HTML и JavaScript для удобства редактирования и замены кода рекламных ротаторов. Или же просто скопировав для удобства весь код целиком вставить в гаджет HTML и JavaScript для блогспот,а если для блога на вордпресс,то в виджет,где размещены все коды независимых производителей.Код прекрасно работает и наWordPress.

Фиксированный блок fixed-sidebar


<ul class="v-golbanerleft">код левого баннера</ul>

<ul class="v-golbanerright">код правого баннера</ul>

Второй вариант избавляет вас от поиска в коде шаблона места где будут размещёны добавленные вами материалы на боковую панель и позволят делать быструю замену необходимых вам элементов.Все настройки панели подписаны непосредственно в коде и изменяя их можно подогнать панели исходя из дизайна своего блога. Подписи удалять нет необходимости всё равно их не будет видно.Для того,чтобы сделать фон прозрачным нужно просто вместо background: #ffffff; добавить background: transparent; 


<style>
.v-golbanerright {
 position: fixed;
 overflow: hidden;
 top: 20px;/* отступ от верхнего края */
width:165px;
 right: 30px;/* позиционирование слева  */
 height: 99%;
 list-style-type: none;
 margin: 0px;
 padding: 0;
 background: transparent;
}
.v-golbanerleft {
 position: fixed;
 overflow: hidden;
 top: 20px;/* отступ от верхнего края */
width:165px;
 left: 30px;/* позиционирование слева */
 height: 99%;
 list-style-type: none;
 margin: 0px;
 padding: 0;
 background: transparent;
}
/* #v-gol.ru  */
@media screen and (max-height: 34.9375em) {
 .cbp-vimenu {
 font-size: 70%;
 }
</style>

Где взять код ротатора баннеров


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

<script>
var banner = new Array();
banner[0] = '<a href="ссылка" target="_blank"><img src="урл изображения" alt="" width="250" height="400"></a>';
banner[1] = '<a href="ссылка" target="_blank"><img src="урл изображения" alt="" width="250" height="400"></a>';
banner[2] = '<a href="ссылка" target="_blank"><img src="урл изображения" alt="" width="250" height="400"></a>';
var n = ~~(Math.random()*3);
document.write(banner[n]);
</script>

Смотреть ещё

Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода


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