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

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

фиксированное объявление в блоге


В блоггер легко устанавливается в гаджете 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


9 комментариев:

  1. Ответы
    1. Ирина, пожалуйста. Забыла написать, что таким образом можно дать ссылки на свои другие блоги.

      Удалить
  2. Простота использования варианта хороша, спасибо, Вика. И ненавязчивая информация перед глазами.

    ОтветитьУдалить
  3. https://bvd-2.blogspot.com/2019/01/blog-post_23.html
    Вика. Где-то про загадку с открывающейся отгадкой есть материал? Спасибо.

    ОтветитьУдалить
  4. Люба, ты верно отметила, не раздражает и очень просто. И место не занимает. Ой, я сама еле нашла статью про этот спойлер с загадкой Держи http://www.shpargalochki.ru/2019/06/spojler-na-chistom-css-dlya-blogger.html

    ОтветитьУдалить
  5. Черт побери, Вика! Ну, что бы Вам жить в Питере. Пригласил бы к себе, выпили бы по бокалу Мартини, и я бы всему у Вас научился. А так..

    ОтветитьУдалить
  6. Семён, даст Бог приехать, загляну. Только я больше холодный виски люблю, вот такая я.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML