Пример:
Тут текст, который мы хотим показать только посетителям с отключенным AdBlock, например, текст статьи, кнопку скачать или информацию ниже.
HTML:
|
1 2 3 4 5 |
<div class="m-container"> <div id="reklama"> <p>Тут текст, который мы хотим показать только посетителям с отключенным <b>AdBlock</b>, например текст статьи или кнопку скачать.</p> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.m-container { position: relative; } .m-container:before { content: "Если вы видите данное сообщение, возможно у вас включен блокировщик рекламы AdBlock"; position: absolute; color: red; top: 0; left: 0; z-index: -1; } #reklama { background: #FFF; } |
Как это работает:
- Мы вкладываем нужный нам текст, блок, кнопку и т.д. в контейнер
m-container, псевдоэлементом которого будет показываться текст при включенном блокираторе (чтобы не писать лишний текст в HTML). - Делаем этот контейнер относительно, а текст абсолютно позиционируемым с отрицательным индексом по оси Z, чтобы он перекрывался информационным блоком, который мы и проверяем.
- Присваиваем этому блоку
id="reklama", который заблокирует AdBlockПроверялось на
id="reklama"30 января 2021 года на AdBlock и AdBlockPlus - Если наш блок заблокирован, то мы увидим текст предупреждения, который находится под ним
- Если не заблокирован, то он перекроет это предупредительное сообщение
а как заблюрить картинки на странице при включенном блокировщике? как, например, сделано на Дзене
На Дзене что то на сриптах скорее всего, на CSS можно попробовать так:
В контейнер вкладывается 2 фото (можно одинаковых), одно блюр, а поверх него правильное в контейнере adv.
Если блокировщик включен, он заблокирует правильное.
Здравствуйте. Попробовал и у меня не получилось. На вашем сайте работает, а вот на моем dle нет. Может вы знаете в чем может быть загвостка.
Независимо включен ли адблок или нет, я всегда вижу сообщение:
Скиньте ссылку, посмотреть что получилось у вас
Я немного разобрался, но столкнулся с проблемой при попытке отобразить сообщение для пользователей, у которых включен блокировщик рекламы (например, AdBlock). Код работает отлично с AdBlock, но при использовании AdGuard текст, который должен показываться при включенном блокировщике, не отображается. Похоже, что AdGuard блокирует не только объявления, но и другие элементы, связанные с рекламой. Однако несмотря на это, с AdGuard текст всё равно не появляется, хотя с AdBlock работает. Могли бы вы подсказать, что можно сделать, чтобы этот код работал и с AdGuard?
Буду признателен за любую помощь или советы!
Посмотрите в инструментах разработчика как показываются и блокируются блоки.
Возможно AdGuard блокирует и родителя рекламного блока, т.к. он пустой становится.
Как вариант можно попробовать без использования псевдоэлемента. Т.е. 2 блока, наложенных друг на друга, перекрывающий имеет рекламный класс или айди, и если блокировщик его удалил, то мы увидим тот, который под ним, с альтернативным текстом.
Все почти верно, но нужно добавить к .m-container добавить z-index: 1;
.m-container { position: relative; z-index: 1; }Теперь все будет работать.