Блокирование элементов сайта при включенном AdBlock на CSS

Для того чтобы попросить посетителя сайта отключить AdBlock, вовсе не обязательно мучать его всплывающими окнами, которые кстати можно им же и заблокировать, или писать хитрые скрипты (как в теме про определение показа рекламы), которые можно просто отключить.

Есть решение проще — использовать CSS.

Пример:

Тут текст, который мы хотим показать только посетителям с отключенным AdBlock, например, текст статьи, кнопку скачать или информацию ниже.

HTML:

CSS:

Как это работает:

  • Мы вкладываем нужный нам текст, блок, кнопку и т.д. в контейнер m-container, псевдоэлементом которого будет показываться текст при включенном блокираторе (чтобы не писать лишний текст в HTML).
  • Делаем этот контейнер относительно, а текст абсолютно позиционируемым с отрицательным индексом по оси Z, чтобы он перекрывался информационным блоком, который мы и проверяем.
  • Присваиваем этому блоку id="reklama", который заблокирует AdBlock

    Проверялось на id="reklama" 30 января 2021 года на AdBlock и AdBlockPlus

  • Если наш блок заблокирован, то мы увидим текст предупреждения, который находится под ним
  • Если не заблокирован, то он перекроет это предупредительное сообщение

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Adblocker:

    а как заблюрить картинки на странице при включенном блокировщике? как, например, сделано на Дзене

    Ответить
    • Alexander:

      На Дзене что то на сриптах скорее всего, на CSS можно попробовать так:
      В контейнер вкладывается 2 фото (можно одинаковых), одно блюр, а поверх него правильное в контейнере adv.
      Если блокировщик включен, он заблокирует правильное.

      Ответить
  • Alexey:

    Здравствуйте. Попробовал и у меня не получилось. На вашем сайте работает, а вот на моем dle нет. Может вы знаете в чем может быть загвостка.

    Независимо включен ли адблок или нет, я всегда вижу сообщение:

    Тут текст, который мы хотим показать только посетителям с отключенным AdBlock, например текст статьи или кнопку скачать.

    Ответить
    • Alexander:

      Скиньте ссылку, посмотреть что получилось у вас

      Ответить
      • Alexey:

        Я немного разобрался, но столкнулся с проблемой при попытке отобразить сообщение для пользователей, у которых включен блокировщик рекламы (например, AdBlock). Код работает отлично с AdBlock, но при использовании AdGuard текст, который должен показываться при включенном блокировщике, не отображается. Похоже, что AdGuard блокирует не только объявления, но и другие элементы, связанные с рекламой. Однако несмотря на это, с AdGuard текст всё равно не появляется, хотя с AdBlock работает. Могли бы вы подсказать, что можно сделать, чтобы этот код работал и с AdGuard?

        Буду признателен за любую помощь или советы!

        Ответить
        • Alexander:

          Посмотрите в инструментах разработчика как показываются и блокируются блоки.
          Возможно AdGuard блокирует и родителя рекламного блока, т.к. он пустой становится.
          Как вариант можно попробовать без использования псевдоэлемента. Т.е. 2 блока, наложенных друг на друга, перекрывающий имеет рекламный класс или айди, и если блокировщик его удалил, то мы увидим тот, который под ним, с альтернативным текстом.

          Ответить
  • Дмитрий:

    Все почти верно, но нужно добавить к .m-container добавить z-index: 1;

    .m-container {
        position: relative;
    	z-index: 1;
    }
    

    Теперь все будет работать.

    Ответить