Jump to content
Sign in to follow this  
LyalinDV

Адаптивные блоки-постеры

Recommended Posts

Добрый день! После смены шаблоны сайта на адаптивный, появилась проблема с блоками РСЯ, а именно: наибольший доход мне приносили блоки-постеры, а не просто постеры РСЯ. Но у РСЯ нет адаптивных блоков-постеров, а обычные приносят меньший доход. Может есть вариант решения адаптивности блоков-постеров?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Вот так выглядит блок-постер у РСЯ:

<!-- Яндекс.Директ -->
<script type="text/javascript">
yandex_partner_id = XXXXXX;
yandex_site_bg_color = 'FFFFFF';
yandex_stat_id = 8;
yandex_ad_format = 'direct';
yandex_direct_type = 'posterHorizontal';
yandex_direct_border_type = 'ad';
yandex_direct_limit = 3;
yandex_direct_title_font_size = 3;
yandex_direct_links_underline = true;
yandex_direct_border_color = 'FBE5C0';
yandex_direct_title_color = '0000CC';
yandex_direct_url_color = '006600';
yandex_direct_text_color = '000000';
yandex_direct_hover_color = '0066FF';
yandex_direct_favicon = true;
yandex_no_sitelinks = true;
document.write('<scr'+'ipt type="text/javascript" src="//an.yandex.ru/system/context.js"></scr'+'ipt>');
</script>

Share this post


Link to post
Share on other sites

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

 

 

Вот так выглядит блок-постер у РСЯ:

<!-- Яндекс.Директ -->
<div style="width: 100%; height: auto;">
<script type="text/javascript">
yandex_partner_id = XXXXXX;
yandex_site_bg_color = 'FFFFFF';
yandex_stat_id = 8;
yandex_ad_format = 'direct';
yandex_direct_type = 'posterHorizontal';
yandex_direct_border_type = 'ad';
yandex_direct_limit = 3;
yandex_direct_title_font_size = 3;
yandex_direct_links_underline = true;
yandex_direct_border_color = 'FBE5C0';
yandex_direct_title_color = '0000CC';
yandex_direct_url_color = '006600';
yandex_direct_text_color = '000000';
yandex_direct_hover_color = '0066FF';
yandex_direct_favicon = true;
yandex_no_sitelinks = true;
document.write('<scr'+'ipt type="text/javascript" src="//an.yandex.ru/system/context.js"></scr'+'ipt>');
</script></div>

Share this post


Link to post
Share on other sites

ок. Попробую. Тогда еще один вопрос: сейчас у меня стоят адаптивные блоки Adsense, добавляю их через шорткод таким образом:

function ads1() {
return '
<center><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Amin1 -->
<ins class="adsbygoogle Amin1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></center>';
}
add_shortcode('adsense1', 'ads1');

+ стили

.Amin1 { width: 250px; height: 250px; }
@media(min-width: 350px) { .Amin1 { width: 336px; height: 280px; } }
@media(min-width: 600px) { .Amin1 { width: 580px; height: 400px; } }

Мне необходимо сделать его Синхронным, а не асинхронным, так как блок на мобилах долго загружается

Share this post


Link to post
Share on other sites

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 

Параметр "async" в вашем случае отвечает за асинхронную загрузку. Следовательно нужно 

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Share this post


Link to post
Share on other sites

 

Параметр "async" в вашем случае отвечает за асинхронную загрузку. Следовательно нужно 

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Спасибо!

 

Ну раз пошла такая пьянка, попробуем решить последнюю проблему... Вообщем есть блок Адсенсе с обтеканием слева 336х280. Как его лучше использовать при адаптивной верстке? на больших экранах он смотрится хорошо, на маленьких - не очень

Share this post


Link to post
Share on other sites

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

 

не работает

Share this post


Link to post
Share on other sites

Вам нужно открыть стили, например, через Firebug, найти свойство, отвечающее за ширину и переопределить его в своих стилях на сайте, указав !important; И всё гарантировано будет!

Share this post


Link to post
Share on other sites

адаптивностью проблема решилась так:

<!-- Яндекс.Директ -->
<script type="text/javascript">
var limmw=document.getElementsByTagName("body")[0].offsetWidth;
if (limmw>=645) {var limm="3";} else {var limm="2";}
if (limmw<=440) {limm="1";}

yandex_partner_id = XXXXXX;
yandex_site_bg_color = 'FFFFFF';
yandex_stat_id = 8;
yandex_ad_format = 'direct';
yandex_font_family = 'arial';
yandex_direct_type = 'posterHorizontal';
yandex_direct_border_type = 'ad';
yandex_direct_limit = limm;
yandex_direct_title_font_size = 3;
yandex_direct_links_underline = true;
yandex_direct_border_color = 'FBE5C0';
yandex_direct_title_color = '0000CC';
yandex_direct_url_color = '006600';
yandex_direct_text_color = '000000';
yandex_direct_hover_color = '0066FF';
yandex_direct_favicon = true;
yandex_no_sitelinks = true;
document.write('<scr'+'ipt type="text/javascript" src="//an.yandex.ru/system/context.js"></scr'+'ipt>');
</script>

для центрирования попытался сделать так:

 

<div style="margin-left: auto; margin-right: auto; display: inline-block;">код РСЯ</div>

Не получилось

Share this post


Link to post
Share on other sites

Спасибо!

 

Ну раз пошла такая пьянка, попробуем решить последнюю проблему... Вообщем есть блок Адсенсе с обтеканием слева 336х280. Как его лучше использовать при адаптивной верстке? на больших экранах он смотрится хорошо, на маленьких - не очень

 

@media(max-width: 600px) {

.класс_блока_асенс { width: 100%; height: auto; max-width: 336px}

}

Share this post


Link to post
Share on other sites

@media(max-width: 600px) {

.класс_блока_асенс { width: 100%; height: auto; max-width: 336px}

}

 

Смотрится не очень. Может можно как то сделать, чтобы скажем при разрешении меньше 600 блок становился по центру?

Share this post


Link to post
Share on other sites

Сейчас блок выглядит так:

.Amin1 { width: 250px; height: 250px; }
@media(min-width: 350px) { .Amin1 { width: 336px; height: 280px; } }
@media(min-width: 600px) { .Amin1 { width: 580px; height: 400px; } }

Share this post


Link to post
Share on other sites

Смотрится не очень. Может можно как то сделать, чтобы скажем при разрешении меньше 600 блок становился по центру?

@media(max-width: 600px) {

.класс_блока_асенс{float:none;display:block;margin 0 auto;padding:15px 0;width: 60% !important; height: auto !important}

.класс_элемента_который_прилипает {float:none;display: block; width:100%; margin: 0 auto; margin-bottom:15px}

}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...