Вернуться   Форум об интернет-маркетинге > > >
Ответ
 
Опции темы
Старый 29.02.2016, 08:33   #1
Кандидат наук
 
Регистрация: 20.05.2015
Сообщений: 346
Репутация: 16609

По умолчанию Адаптивный код

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

Скажем сейчас стоит код 580x400. Для детскопа мне необходимо, чтобы показывался именно 580x400, но на меньших экранах чтобы показывался меньший квадрат. Именно квадрат, а не узкий 468х60. Подскажите пож-та как это реализовать?

Ведь если просто поставить адаптивный код, то он на десткопах может показывать и 728х90.
LyalinDV вне форума   Ответить с цитированием

Реклама
Старый 29.02.2016, 08:35   #2
Squier13
Дипломник
 
Регистрация: 10.03.2012
Сообщений: 64
Репутация: -3976

По умолчанию Re: Адаптивный код

Через css https://support.google.com/adsense/answer/6307124
Squier13 вне форума   Ответить с цитированием
Старый 29.02.2016, 09:46   #3
LyalinDV
Кандидат наук
 
Регистрация: 20.05.2015
Сообщений: 346
Репутация: 16609

ТопикСтартер Re: Адаптивный код

Получается

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>

вставляем в файл CSS, а это:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

уже в то место, где хотим видеть рекламу?
LyalinDV вне форума   Ответить с цитированием
Старый 29.02.2016, 10:07   #4
Squier13
Дипломник
 
Регистрация: 10.03.2012
Сообщений: 64
Репутация: -3976

По умолчанию Re: Адаптивный код

Цитата:
Сообщение от LyalinDV Посмотреть сообщение
Получается

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>

вставляем в файл CSS, а это:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

уже в то место, где хотим видеть рекламу?
Да. Если хочется совсем красиво, то вот здесь инструкция как полностью разделить всё на css, html и js: http://shostak.ru/adsense. Не забудте только правильно прописать идентификаторы.

Последний раз редактировалось Squier13; 29.02.2016 в 10:19..
Squier13 вне форума   Ответить с цитированием
Старый 29.02.2016, 11:22   #5
LyalinDV
Кандидат наук
 
Регистрация: 20.05.2015
Сообщений: 346
Репутация: 16609

ТопикСтартер Re: Адаптивный код

Что-то не понимаю.


Добавляю в CSS:

<style>
.Реклама { width: 336px; height: 280px; }
@media(min-width: 600px) { .Реклама { width: 580px; height: 400px; } }
@media(min-width: 800px) { .Реклама { width: 580px; height: 400px; } }
</style>

Вставляю в нужное место:

<p style="text-align: center;"><script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<!-- Реклама -->
<ins class="adsbygoogle Реклама"
style="display:inline-block"
data-ad-client="ca-pub-71986011941195XX"
data-ad-slot="69508505XX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>

Ничего не показываю.

Но стоит скопировать код с Адсенсе:

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<!-- Реклама -->
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-71986011941195XX" data-ad-slot="69508505XX" data-ad-format="auto"></ins>
<script>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>

все работает.

Что я делаю не так?
LyalinDV вне форума   Ответить с цитированием
Старый 29.02.2016, 11:47   #6
Баркас
Аспирант
 
Регистрация: 14.01.2015
Сообщений: 106
Репутация: 7222

По умолчанию Re: Адаптивный код

Цитата:
Сообщение от LyalinDV Посмотреть сообщение
Что-то не понимаю.


Добавляю в CSS:

<style>
.Реклама { width: 336px; height: 280px; }
@media(min-width: 600px) { .Реклама { width: 580px; height: 400px; } }
@media(min-width: 800px) { .Реклама { width: 580px; height: 400px; } }
</style>

Вставляю в нужное место:

<p style="text-align: center;"><script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<!-- Реклама -->
<ins class="adsbygoogle Реклама"
style="display:inline-block"
data-ad-client="ca-pub-71986011941195XX"
data-ad-slot="69508505XX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>

Ничего не показываю.

Но стоит скопировать код с Адсенсе:

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<!-- Реклама -->
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-71986011941195XX" data-ad-slot="69508505XX" data-ad-format="auto"></ins>
<script>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>

все работает.

Что я делаю не так?
(.Реклама { width: 336px; height: 280px; })
А разве в css уже можно русскими буквами классы прописывать?
Баркас вне форума   Ответить с цитированием
Старый 29.02.2016, 12:27   #7
LyalinDV
Кандидат наук
 
Регистрация: 20.05.2015
Сообщений: 346
Репутация: 16609

ТопикСтартер Re: Адаптивный код

По инструкции так:

"Замените все экземпляры example_responsive_1 названием своего рекламного блока. Вместо пробелов используйте символ подчеркивания "_", например Главная_страница."
LyalinDV вне форума   Ответить с цитированием
Старый 29.02.2016, 13:41   #8
schulz
Кандидат наук
 
Регистрация: 04.04.2014
Сообщений: 275
Репутация: 14206

По умолчанию Re: Адаптивный код

Подскажите, пожалуйста, знатоки CSS

А можно ли и как для разных экранов показывать коды разных рекламных сетей,

Конкретно интересует такой пример, хочу показывать рекламу не от гугла для размеров экрана больше 619, а для размеров экрана меньше 619(с 618) код адсенса, как это правильно организовать?

Вот как это делается для примера такого:

<style type="text/css">
.header{width:970px;height:250px;display:inline-block}
@media (min-width:765px) and (max-width:1034px){.header{width:729px;height:90px}}
@media (min-width:619px) and (max-width:764px){.header{width:336px;height:280px}}
@media (min-width:360px) and (max-width:618px){.header{width:300px;height:250px}}
@media (max-width:359px){.header{width:300px;height:250px}}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle header"
style="display:inline-block"
data-ad-client="ca-pub-XXXX"
data-ad-slot="XXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

И есть код от другой сетки:

<div id="header2"></div>
<script type="text/javascript" src="//reklama.php"></script>

Сейчас просто стоит код от другой сетки и показывается всем и вся, а раньше стоял просто код адсенс.
schulz вне форума   Ответить с цитированием
Старый 29.02.2016, 14:11   #9
Squier13
Дипломник
 
Регистрация: 10.03.2012
Сообщений: 64
Репутация: -3976

По умолчанию Re: Адаптивный код

Цитата:
Сообщение от schulz Посмотреть сообщение
Подскажите, пожалуйста,
Код:
 #header2 {
 display:block;
 }
#header1 {
display:none;
}
@media screen and (min-width: 619px) {
 #header1 {
 display:block;
 }
#header2 {
display:none;
}
}
Код:
<div id="header1">показываюсь при более или равно 619px</div>
<div id="header2">показываюсь при менее 619px</div>
Squier13 вне форума   Ответить с цитированием
Сказали спасибо:
Старый 29.02.2016, 16:52   #10
awasome
Академик
 
Регистрация: 20.08.2010
Сообщений: 9,074
Репутация: 1061644

По умолчанию Re: Адаптивный код

Цитата:
Сообщение от LyalinDV Посмотреть сообщение
Что я делаю не так?
Это единый код, его надо вставлять полностью, а css вообще трогать не нужно. Прямо так вставлять:

<style>
.Реклама { width: 336px; height: 280px; }
@media(min-width: 600px) { .Реклама { width: 580px; height: 400px; } }
@media(min-width: 800px) { .Реклама { width: 580px; height: 400px; } }
</style>
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<!-- Реклама -->
<ins class="adsbygoogle Реклама"
style="display:inline-block"
data-ad-client="ca-pub-71986011941195XX"
data-ad-slot="69508505XX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Центр добавить по желанию.
awasome вне форума   Ответить с цитированием
Ответ



Опции темы

Быстрый переход


Регистрация Справка Календарь Поддержка Все разделы прочитаны