Установка адаптивной рекламы от Adsense (HTML5)

  1   2   3   4   5   6   7   8   9

пред след

Получим адаптивный код у Adsense под названием goriz_adap1:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- goriz_adap1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5184419661508817"
data-ad-slot="5844414544"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


Помещаем его в тэг aside с изменениями, согласно инструкции в adsense для адаптивных блоков (https://support.google.com/adsense/answer/9183363?hl=ru&ref_topic=9183242):
<aside class="goriz_adap1"> <!-- goriz_adap1 от 08.11.20 ADSENSE-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adapslot  "
data-ad-client="ca-pub-5184419661508817"
data-ad-slot="5844414544"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</aside>

Красным цветом выделены индивидуальные для вас цифры, а adapslot придуманное вами название рекламы для задания параметров в файле таблицы стилей
Определяем для aside селектор .goriz_adap1 (класс goriz_adap1)
.goriz_adap1 {
display: inline-block;
float: left;
border: 1px solid blue; }

Так как эта реклама адаптивная, т.е. размер рекламы должен меняться в зависимости от ширины экрана. Размер указывается для .adapslot и .goriz_adap1:
@media(min-width: 240px) {.adapslot { width: 320px; height: 100px; }
.goriz_adap1 {width: 320px; height: 105px;}}
@media(min-width: 500px) { .adapslot { width: 468px; height: 60px; }
.goriz_adap1 {width: 468px; height: 60px;  }}
@media(min-width: 900px) { .adapslot { width: 728px; height: 90px; }
.goriz_adap1 {width: 728px; height: 90px;} } 
 
        Это медийные запросы  для файла web.ss. В них описаны размеры тэга aside и размеры рекламы для экранов не больше 240рх, не больше 500рх, не больше 900рх.     
Далее рассмотрим поведение других тэгов при изменении экрана. При уменьшении ширины меню должно уйти вверх, ниже будут располагаться горизонтальная реклама Adsense, основной контент и реклама с Adsense вертикальная. Для этого в  web.ss в медиа до ширины 1024рх скопируем свойства для селекторов  .aside_menu, .main, .right_aside. В них изменим ширину: для .aside_menu-100%, т.е. чтобы меню заняло всю ширину экрана; для .main-98%; для .right_aside  margin-left: 38% (Чтобы вертикальная реклама расположилась посередине экрана, рис. 29)

@media  (max-width: 1024px) {
.main {width: 98%;
            font-size: 14px;
            height: auto;}
.aside_menu {width: 100%;}
.right_aside {margin-left: 38%; }
}

Медиа запрос можно создать, нажав на «+» на линейке (рис. 29). Появится форма для определения медиа запроса. Результат добавится в файл таблицы стилей, если файла нет, то предложат вам его создать.



Рис. 29. Создание медиазапроса по форме для максимальной ширины экрана, минимальной и т.д.

 


Рис. 30. Расположение тэгов при сжатии

      На рис.30 вначале появляется меню сайта, которое заполняет всю ширину экрана, затем реклама от Adsense. Далее контент, а по середине экрана вертикальная реклама также от Adsense.

  1   2   3   4   5   6   7   8   9