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

В блоггер легко устанавливается в гаджете 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="none"">
<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="none"">Буду рада видеть вас - заходите, читайте, подписывайтесь<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 (для
левого). Задали для каждого соответственные стили. Если вам нужен только один
фиксированный блог объявления, уберите лишний из кода. Я отметила разным цветом
каждый.
В строках зелёного цвета можно задать нужную высоту блока, убрать или изменить
фон. На тестовом блоге вы видели, что слева у меня добавлен текст и логотип, а
справа только логотип. То, на что вы хотите обратить внимание в своём блоке
объявления, замените строчки сиреневого цвета.
Повторюсь, что это может быть любое текстовое сообщение, какая - то картинка, код
баннера или партнёрки.
Такие фиксированные объявления всегда буду на виду у посетителей. Что
непременно привлечёт их внимание.
Спасибо за внимание и до встречи.
Здесь вы можете оформить подписку на новые шпаргалки
Интересно! Спасибо!
ОтветитьУдалитьИрина, пожалуйста. Забыла написать, что таким образом можно дать ссылки на свои другие блоги.
УдалитьПростота использования варианта хороша, спасибо, Вика. И ненавязчивая информация перед глазами.
ОтветитьУдалитьhttps://bvd-2.blogspot.com/2019/01/blog-post_23.html
ОтветитьУдалитьВика. Где-то про загадку с открывающейся отгадкой есть материал? Спасибо.
Люба, ты верно отметила, не раздражает и очень просто. И место не занимает. Ой, я сама еле нашла статью про этот спойлер с загадкой Держи http://www.shpargalochki.ru/2019/06/spojler-na-chistom-css-dlya-blogger.html
ОтветитьУдалитьСпасибо, Викуля!
УдалитьЧерт побери, Вика! Ну, что бы Вам жить в Питере. Пригласил бы к себе, выпили бы по бокалу Мартини, и я бы всему у Вас научился. А так..
ОтветитьУдалитьСемён, даст Бог приехать, загляну. Только я больше холодный виски люблю, вот такая я.
ОтветитьУдалитьКакой вопрос7!
Удалить