Плагины, темы и скрипты
собственной разработки

Обратная связь

Как разместить 2 блока объявлений РСЯ или AdSense рядом (в одну линию)

Как говорят манимейкеры со стажем: "лучше всего кликают по контекстной рекламе, если поставить в начале статьи 2 квадратных рекламных блока рядом". Давайте научимся ставить эти объявления в одну линию друг напротив друга, чтобы смотрелось на сайте красиво.

Все делается за минуту, но я распишу подробно со скриншотами, чтобы вам осталось только внедрить пару строк кода в свои объявления. Рекламные сети это не запрещают!

Вариантов расстановки в ряд объявлений много, но я покажу самый простой, который сможет сделать каждый из вас. При этом объявления будут равномерно распределены по горизонтали (заполнят пространство), а не прижаты к одному краю.

Что понадобится

Нам понадобится непосредственно код рекламных объявлений. Это обычно 300*300, 300*250 и т.п. Т.е. с фиксированным размером и не сильно большие, чтобы могли 2 рядом находиться в области вашего контента и не вылазить за границы по горизонтали.

Если у вас сайт на WordPress, то рекомендую для расстановки рекламы по сайту использовать плагин AdsPlace'r Pro.

Далее по порядку рассмотрим различные связки: РСЯ + РСЯ, AdSense + AdSense, РСЯ + AdSense.

Делаем: 2 блока РСЯ рядом

Размещаем коды блоков друг за другом. Красной линией отметил где начинается второй блок.

клик для увеличения

Теперь надо добавить следующее:

  1. Оборачиваем эти 2 объявления в блок div с параметрами

    Смотрите пример. Стрелками показано куда вставляем.

    клик для увеличения

  2. Теперь добавляем в div самого кода РСЯ параметры стилей. В каждый блок рекламы.

    Смотрите пример. Стрелками показано куда вставляем.

    клик для увеличения

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

Делаем: 2 блока AdSense рядом

Google дает сразу код блоков, чтобы они встали рядом. В них уже присутствует параметр css, который мы выше задавали для РСЯ display:inline-block; и, поэтому, вставлять в сами блоки ничего не нужно. Но на всякий случай проверьте свои коды.

клик для увеличения

Проблема в том, что блоки прижимаются на одну сторону, т.к. они меньше размера контента. Смотрится не очень.

клик для увеличения

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

Ставим 2 кода блоков AdSense друг за другом, как это делали в случае с РСЯ.

клик для увеличения

  1. Оборачиваем эти 2 объявления в блок div с параметрами

    Смотрите пример. Стрелками показано куда вставляем.

    клик для увеличения

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

Делаем: 1 РСЯ + 1 AdSense (и наоборот)

Тут все аналогично, как писалось выше:

  1. Ставим объявления в нужной вам последовательности друг за другом.
  2. Оборачиваем их в
  3. Добавляем в div самого кода РСЯ параметры стилей. Пример был показан выше.
  4. Убеждаемся, что в коде блока AdSense есть параметр display:inline-block;. Пример рассматривали выше.
  5. Сохраняем и проверяем.

Бонус

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

Все делается очень просто.

Ранее мы оборачивали наши блоки рекламы в div с параметрами:

Давайте заменим justify-content: space-around; на justify-content: space-between;

Тогда реклама прижмется к краям, что так же смотрится симпатично.

Адаптивность

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

Если используете AdsPlace'r Pro, то тут проблем нет: вы просто ставите для мобильных ОС другие коды рекламы с одним фиксированным или адаптивным рекламным блоком.

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

  1. Оборачиваем рекламные блоки в div с указанием class и без параметров CSS:

    Этот шаг нам позволит управлять параметрами блока из файла стилей .css и добавить параметры для адаптивности.

  2. В самих блоках рекламы должен быть display:inline-block; (в РСЯ добавляем, а в AdSense проверяем).
  3. В файл стилей шаблона (обычно style.css) добавляем следующее:

  4. Вначале мы задали все те же параметры display: flex;justify-content: space-around;, но уже в файле стилей. А далее мы указали: если разрешение экрана 600px и меньше - значит меняем параметры и блоки теперь должны выводиться друг под другом, но с центрированием по горизонтали.

    Цифра 600, потому что у меня в примере 2 блока с максимальной шириной по 300px. Если у вас другая ширина - подмените цифру 600 на сумму максимальной ширины ваших блоков рекламы.

Надеюсь вы поняли все из статьи 😉

Если что задавайте вопросы в комментариях.

Коментарии
  • Сергей
    29 июня 2017 в 18:05
    Ответить

    Спасибо, полезно.
    А если я использую плагин AdsPlace’r но не pro? Там как с адаптивностью?

    • Виталий WP-R.ru
      29 июня 2017 в 18:11
      Ответить

      В бесплатной версии тоже есть разделение на PC/Mob.

      • Сергей
        29 июня 2017 в 18:16
        Ответить

        То есть, в плагине и в поле PC и в поле Mob ставить один и то же код, который не адаптивный?

        • Виталий WP-R.ru
          29 июня 2017 в 18:26
          Ответить

          В статье есть по этому поводу заметка:
          «Если используете AdsPlace’r Pro, то тут проблем нет: вы просто ставите для мобильных ОС другие коды рекламы с одним фиксированным или адаптивным рекламным блоком.»

          • Сергей
            29 июня 2017 в 19:08
            Ответить

            То есть, ставить для тех, кто смотрит на мобильнике два блока рекламы один под другим вроде как жестоко? Поэтому ставим один адаптивный (например)?

          • Виталий WP-R.ru
            29 июня 2017 в 21:15
            Ответить

            Все верно.

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

наверх