Вернуться   Форум об интернет-маркетинге > > >
Ответ
 
Опции темы
Старый 25.10.2015, 19:07   #1
Профессор
 
Аватар для kapper
 
Регистрация: 25.11.2010
Сообщений: 844
Репутация: 43583
Отправить сообщение для kapper с помощью Skype™

По умолчанию Как правильно сделать адаптивный блок?

Позвонил менеджер с адсенс, пообщались с ним по поводу того как увеличить отдачу от адсенс и пришли к выводу, что все блоки (336 на 280) которые стоят у меня на сайте (1 сверху под заголовком и 2 снизу под статьей параллельно) заменить на адаптивные, чтобы пользователи с мобильных кликали чаще.

Он сказал образно что как то самому надо сделать адаптивные блоки в дивах с ограничениями:

1) верхний шириной максимальной на 720 пикселей и высотой на 280 (получится вся ширина свободного места а высота как у предыдущего блока) - в общем это ограничения и он сам будет подбирать блоки на основе аукциона.

2) 2 нижних сделать тоже адаптивными, но ограничения такие же как сейчас стоят (336 на 280).

Вопрос: подскажите пожалуйста шаблоны верхнего и нижних блоков? Там где номер издателя можно звездочки поставить - заменю на свой.
kapper вне форума   Ответить с цитированием

Реклама
Старый 25.10.2015, 21:05   #2
Maximalist
Работаю за еду, ем много!
 
Аватар для Maximalist
 
Регистрация: 17.04.2007
Адрес: Бендеры
Сообщений: 2,672
Репутация: 480498
Отправить сообщение для Maximalist с помощью ICQ Отправить сообщение для Maximalist с помощью Skype™

По умолчанию Re: Как правильно сделать адаптивный блок?

CSS:
Цитата:
#adsens-footer {
height: 400px;
width: 800px;
}
КОД:
Цитата:
<div id="adsens-footer">БЛОК</div>
__________________
- = тут что-то должно быть = -
Maximalist вне форума   Ответить с цитированием
Старый 25.10.2015, 21:34   #3
kapper
Профессор
 
Аватар для kapper
 
Регистрация: 25.11.2010
Сообщений: 844
Репутация: 43583
Отправить сообщение для kapper с помощью Skype™

ТопикСтартер Re: Как правильно сделать адаптивный блок?

Цитата:
Сообщение от Maximalist Посмотреть сообщение
CSS:

КОД:
Что то кода мало. Вот что я нашел в описаниях гугла.

Код адаптивного рекламного блока с фиксированной высотой в 90 пикселей и переменной шириной в 400–970 пикселей будет выглядеть так:

<ins class="adsbygoogle"
style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>


Как мне переделать этот блок, чтобы ширина была его от 250 пикселей до 100% (ширина у меня 720 пикселей и думаю если поставить 100% он сам будет подбирать до этой ширины). А высота от 60 пикселей до 300 пикселей. ?
kapper вне форума   Ответить с цитированием
Старый 26.10.2015, 22:30   #4
Maximalist
Работаю за еду, ем много!
 
Аватар для Maximalist
 
Регистрация: 17.04.2007
Адрес: Бендеры
Сообщений: 2,672
Репутация: 480498
Отправить сообщение для Maximalist с помощью ICQ Отправить сообщение для Maximalist с помощью Skype™

По умолчанию Re: Как правильно сделать адаптивный блок?

kapper, это для адаптивного диза?
если изменять ваш код, с вашими показателями, то будет как-то так:

Цитата:
<ins class="adsbygoogle"
style="display:inline-block;min-width:250px;max-width:720px;min-height:60px;max-height:300px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
но я считаю что лучше делать для каждого разрешения свой размер
почитайте тут
Maximalist вне форума   Ответить с цитированием
Сказали спасибо:
Старый 26.10.2015, 23:35   #5
kapper
Профессор
 
Аватар для kapper
 
Регистрация: 25.11.2010
Сообщений: 844
Репутация: 43583
Отправить сообщение для kapper с помощью Skype™

ТопикСтартер Re: Как правильно сделать адаптивный блок?

Спасибо, буду разбираться - не отображается чего то
kapper вне форума   Ответить с цитированием
Старый 27.10.2015, 09:52   #6
Kuasar
Профессор
 
Регистрация: 16.12.2009
Сообщений: 912
Репутация: 93740

По умолчанию Re: Как правильно сделать адаптивный блок?

Переменная высота в таком виде не работает.
Инструкция по адаптивным блокам от Гугла тут.
Kuasar вне форума   Ответить с цитированием
Старый 27.10.2015, 10:25   #7
kapper
Профессор
 
Аватар для kapper
 
Регистрация: 25.11.2010
Сообщений: 844
Репутация: 43583
Отправить сообщение для kapper с помощью Skype™

ТопикСтартер Re: Как правильно сделать адаптивный блок?

Цитата:
Сообщение от Kuasar Посмотреть сообщение
Переменная высота в таком виде не работает.
Инструкция по адаптивным блокам от Гугла тут.
Читал ее и код с этой инструкции выложил выше.
kapper вне форума   Ответить с цитированием
Старый 04.01.2016, 23:13   #8
awasome
Академик
 
Регистрация: 20.08.2010
Сообщений: 9,074
Репутация: 1061644

По умолчанию Re: Как правильно сделать адаптивный блок?

В этом коде

Код:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

код .adslot_1 { width: 320px; height: 100px; } используется для размеров экрана до 320 px?
awasome вне форума   Ответить с цитированием
Старый 04.01.2016, 23:30   #9
kapper
Профессор
 
Аватар для kapper
 
Регистрация: 25.11.2010
Сообщений: 844
Репутация: 43583
Отправить сообщение для kapper с помощью Skype™

ТопикСтартер Re: Как правильно сделать адаптивный блок?

Да я уже переплевался и оставил стандартные прямоугольники везде. Хотя менеджер сказал типа с адаптивных доходы лучше будут скорее всего.
Ставил кстати под заголовок 728 на 90 (скорей всего он будет в адаптивном вылазить иногда) и на него хуже кликали чем на большой прямоугольник
kapper вне форума   Ответить с цитированием
Старый 05.01.2016, 00:07   #10
dobs
Дипломник
 
Регистрация: 06.06.2007
Адрес: Ukraine/Kiev
Сообщений: 68
Репутация: 4786

По умолчанию Re: Как правильно сделать адаптивный блок?

А у этого манагера нету часом почты? Хотелось бы спросить что б он мне порекомендовал...
dobs вне форума   Ответить с цитированием
Ответ



Опции темы

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


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