Фиксированный блок для блога.




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


Для чего нужен зафиксированный блок?


Фиксация блока, прежде всего конечно, нужна для донесения до посетителя важной информации  и привлечения визуального внимания к объекту.Тем более,что разместить в блоке можно всё что душа пожелает: ссылки,рекламные объявления,картинки,фотографии и т.д и т.п. Да и мобильность кода позволяет, даже для начинающих пользователей,размещать его только на тех страницах,на которых этот блок будет необходим.

Установка кода фиксированного блока.


Установка состоит из двух частей. GSS-который нужно будет вставить или в шаблон или же в гаджет HTML / JavaScript.
<style>
.Banner-top{
  position:fixed;
  height:100px;   /*Высота блока*/
  width:200px;  /*ширина блока*/
  border:blue solid 1px;
  padding:10px; /*позиционирование блока*/
  top:130px;   /*позиционирование блока*/
  left:30px;  /*позиционирование блока*/
  background-color: #999999;  /*цвет фона блока*/
}.Banner-bottom{
  position:fixed;
  height:100px; /*Высота блока*/
  width:200px;  /*ширина блока*/
  border:blue solid 1px;
 top:130px;   /*позиционирование блока*/
  padding:10px; /*позиционирование блока*/
  bottom:4px;  /*позиционирование блока*/
  right:10px;  /*позиционирование блока*/
  background-color: #999999;  /*цвет фона блока*/
}</style>

И HTML-кода,который можно будет поставить сделав соответствующие изменения по своему усмотрению непосредственно в тело сообщения,на котором вы планируете показ фиксированного блока.Вставить этот код можно в конце сообщения или в любом другом месте,всё равно от перемены мест слагаемых,как говориться, сумма не измениться.
<div class="Banner-top">Ваши ссылки, баннеры,картинки,текст 1 верхний блок </div>
<div class="Banner-bottom">Ваши ссылки, баннеры,картинки,текст 2 нижний блок </div>


Настройки фиксированного блока.


Настройки блока включают в себя много параметров,которые можно будет подстроить под себя.Все переменные величины подписаны и подробного описания,я думаю, не требуется. Если мешает рамка,обрамляющая блок,то измените значение border:blue solid 1px; 1 на 0. Для установки зафиксированного блока нужно выбрать,который вам больше подходит первый или второй,или оба сразу и вставить на страницу.




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