плавающие блоки объявлений на странице

 Всем, привет. Сегодня предложу код, с помощью которого можно сделать закреплённое или фиксированное объявление (картинку, коды баннеров, какая - то ссылка) в верху, с правой, левой или обеих сторон блога. Места много не занимает, так-как расположены по краям экрана, а не в сайдбаре. И всегда будет перед глазами читателя нужная информация. Всё содержимое такого фиксированного блока можно периодически менять, убирать, добавлять, чтобы уж не наскучить однообразием. 

В блоггер легко устанавливается в гаджете HTML/JavaScript. Без подключения библиотек и скриптов, на чистом  CSS. Про настройки поговорим ниже. А пока посмотрите работу на тестовом блоге по углам страницы для примера.

 Демонстрация 

Скопируйте код целиком и установите в гаджет HTML/JavaScript в любом месте блога

<style> .fixed-lside,.fixed-rside{   position:fixed;top:60px;width:160px;height:600px;z-index:9999; }.fixed-lside{   left:0;}.fixed-rside{   right:0;} .close-fixedside{   position:absolute;width:160px;height:45px;line-height:15px;font-family:Arial;font-size:10px;font-weight:400;top:-15px;left:0;text-align:center;background:#dedede;color:#333;cursor:pointer } @media screen and (max-width:800px){  .fixed-lside,.fixed-rside{display:none;visibility:hidden;}} </style>

  <div class="fixed-rside"> <div aria-label="переход" class="close-fixedside" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;"> <a href="http://hpargallka.blogspot.ru/"><img alt="" src="https://3.bp.blogspot.com/-1wKgNBrJSoc/U5sEQUMnLII/AAAAAAAAEcM/qJz86Gm99Zs/s1600/cooltext1604904014%2B%25281%2529.gif" title="шпаргалки блогерши" /></a> ></div>  

  <div class="fixed-lside"> <div aria-label="переход" class="close-fixedside" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">Буду рада видеть вас - заходите, читайте, подписывайтесь<a href="http://hpargallka.blogspot.ru/"><img alt="" src="https://3.bp.blogspot.com/-1wKgNBrJSoc/U5sEQUMnLII/AAAAAAAAEcM/qJz86Gm99Zs/s1600/cooltext1604904014%2B%25281%2529.gif" title="шпаргалки блогерши" /></a> </div>

Общий размер задан в параметрах  160px x 600px( как размер рекламного кода или баннера), но вы можете изменить его на ваше усмотрение. 

Немного о настройках.

Мы задали сразу 2 класса - rside (для правого блока) и lside (для левого). Задали для каждого соответственные стили. Если вам нужен только один фиксированный блог объявления, уберите лишний из кода. Я отметила разным цветом каждый.  

В строках зелёного цвета можно задать нужную высоту блока, убрать или изменить фон. На тестовом блоге вы видели, что слева у меня добавлен текст и логотип, а справа только логотип. То, на что вы хотите обратить внимание в своём блоке объявления, замените строчки сиреневого цвета. 

Повторюсь, что это может быть любое текстовое сообщение, какая - то картинка, код баннера или партнёрки.

 

Такие фиксированные объявления всегда буду на виду у посетителей. Что непременно привлечёт их внимание.  

Спасибо за внимание и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email