ZorNet.Ru — сайт для вебмастера » HTML и CSS » Просьба отключить AdBlock на чистом CSS

Просьба отключить AdBlock на чистом CSS

Просьба отключить AdBlock на чистом CSS
Это вероятно одно из самых простых решений, которое работает на чистом CSS, где при включенном AdBlock вы можете изначально спрятать информацию. А точнее будет к примеру надпись, что отключи блокировщик рекламы, это касается AdBlock и AdBlockPlus, и сама надпись идет под красным оттенком. Как только вы отключите, то произойдет перезагрузка страницы, и перед вами появится информация, которая соответствует заголовку.

Что главное, что отлично работает на чистом CSS, где ниже будет demo-страница, где можете все посмотреть, но если у вас установлен AdBlock, хотя у меня на браузере установлен adguard, что также все отлично сработала. Но это не все, ведь мы только задействовали описание, но немного знания HTML + CSS, где вы сами можете доработать, просто добавить стилей, и красиво оформить, а также поставить изображение для полного комплекта.

Как работает: стиль устанавливаем по месту в CSS, где как раз идет описание в алом оттенке. А вот в HTML нужно добавлять в сам материал, а где описание, там будет ваш полный материал. Как описание или скрипт, здесь нужно обязательно заключить в данный HTML, то без этого не чего не получится.

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


Установка:

HTML

Код
<div class="m-container">
  <div id="reklama">
  <p>Как только вы отключили <b>AdBlock</b>, то вместо красного описание, вы увидите данную информацию, которая безусловно будет полностью соответствовать названию.</p>
  </div>
</div>

CSS

Код
.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 - где данный псевдоэлементом изначально показывает тот текст, что вы написали при включенном блокировщике рекламы. Далее нужно присвоить заданному блоку id="reklama" - что полностью отвечает за блокировку информации при включенном AdBlock.

Нужно добавлять HTML, если ставить, то на тот материал, который больше идет посещение, а то некоторые изначально могут на весь поставить, что считаю неправильно. Хотя если вы считаете весь материал важным, и у вас тем более есть реклама, и для того, чтоб ее многие видели, то нужно ставить как можно больше.

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

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

Автор и источник: atuin.ru
31 Июля 2023 Загрузок: 3 Просмотров: 2140 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

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