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

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

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

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

В прошлый раз мы учились самостоятельно делать тизеры на сайте

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

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

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

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

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

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

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

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

   <div style="display: flex;justify-content: space-around;"> здесь коды 2 блоков РСЯ </div>

   1 2 3 4 5

   <div style="display: flex;justify-content: space-around;"> здесь коды 2 блоков РСЯ </div>

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

   

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

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

   style="display: inline-block;"

   1 2 3

   style="display: inline-block;"

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

   

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

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

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

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

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

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

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

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

   <div style="display: flex;justify-content: space-around;"> здесь коды 2 блоков AdSense </div>

   1 2 3 4 5

   <div style="display: flex;justify-content: space-around;"> здесь коды 2 блоков AdSense </div>

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

   

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

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

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

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

1. Ставим объявления в нужной вам последовательности друг за другом.
2. Оборачиваем их в
   
   XHTML

   <div style="display: flex;justify-content: space-around;"> здесь коды блоков РСЯ и AdSense </div>

   1 2 3 4 5

   <div style="display: flex;justify-content: space-around;"> здесь коды блоков РСЯ и AdSense </div>

3. Добавляем в div самого кода РСЯ параметры стилей. Пример был показан выше.
   
   XHTML

   style="display: inline-block;"

   1 2 3

   style="display: inline-block;"

4. Убеждаемся, что в коде блока AdSense есть параметр display:inline-block;. Пример рассматривали выше.
5. Сохраняем и проверяем.

Бонус

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

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

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

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

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

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

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

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

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

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

   <div class="ads_block_1"> здесь коды блоков рекламы </div>

   1 2 3 4 5

   <div class="ads_block_1"> здесь коды блоков рекламы </div>

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

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

   .ads_block_1 { display: flex; justify-content: space-around; } @media only screen and ( max-width: 600px ) { .ads_block_1 { display: inherit; text-align: center; } }

   1 2 3 4 5 6 7 8 9 10 11 12

   .ads_block_1 { display: flex; justify-content: space-around; } @media only screen and ( max-width: 600px ) { .ads_block_1 { display: inherit; text-align: center; } }

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

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

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

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