Продолжим тему монетизации, но не забывая о Usability…
…как помните из предыдущей статьи – добавление на сайт блоков рекламы Google AdSense и Яндекс – рекламный код у нас завёрнут в id-класс (идентификатор) adsens – он нам и пригодится, реализуя сегодняшнюю задачу.
Но к рабочему id потребуется добавить ещё одно свойство, соорудив коротенький примерчик, в котором и обыграем нашу мечту свойством-значением display:none
Начнём концерт…
прячем отображение блоков рекламы на экране низкого разрешения
ПАМЯТКА:
…напоминаю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Копируйте редактируемые файлы. Пригодится!
Поверьте: так короче до профессионализма, ибо возможность переварки накопленных крупиц знаний в кашу маловероятна!
Работает это следующим образом:
…применяются некоторые медиа-запросы css3.
Так и в нашем случае помогут примеры с правилом @media, после которого назначено определённое условие для типов (screen) носителей: логические операторы и медиа-функции.
Получается примерно так:
…из которых логический оператор @media only screen and и медиа-функция (max-width:400px) { …
медийная фраза обязательно в скобках.
Нам требуется типаж screen — экран монитора.
Далее задаём медиа-запросу CSS свойства, которые будут выполняться:
display — понятно. none — скрывает (правильнее — удаляет) мелкий/крупный элемент сайта.
И помните, что географическое место скрытого элемента не резервируется в web-документе, а контент веб-страницы формируется без него.
Да вот и сформированные нужные строки:
@media only screen and (max-width:400px) {
#adsens{display:none}
}
Что ж, коли определились с экспериментальным блоком – давайте приступим к дельцу.
Потребуется открыть файл стилей в корне шаблона – style.css и припомнить прошлые действия вставки кодированных строк рекламы…
У нас получился такой HTML-код-монетизации в предыдущей статье:
<div id="adsens">ВАШ_КОД</div>
И если вы id класс не меняли, то копируйте верхний пример с @media указанием и прописывайте в свой в файл стилей.
Теперь главное)) ступайте на страничку блога и жмите F5 – банальным стягиванием окна браузера компьютера оцените как выполняются css указания. …либо просто взгляните на своём гаджете.
…400px (ширина экрана, после которой контент перестраивается) или 800px – решать вам, ибо бог ведает какие величины оптимальнее пристальному взору поисковиков…
Предфинальный занавес!
…кроме того – подобными media-запросами настраиваются физические исчезания и иных divов геометрических элементов сайта… Экспериментируйте…
…с видеороликом, например, – я задал настройки media одному из сайтов – ибо Java-скрипты конфликтовали при просмотре блога на мелком экране. Opera-mini этим страдает…
В следующей статье выучимся, чтобы на скрытое географическое место элемента видео добавлялась ссылка… или пояснение…
…Автор полагает, читателю полезно будет подписаться…
Online консультация по настройкам и созданию сайтов на WordPress
На этом моя повесть нынче решительно окончена...!
Михаил ATs -