Произвольное оформление контекстных рекламных блоков на примере Яндекс Директ

Яндекс Директ - Игра на Выживание Всем привет. Сегодня решил поделиться одним читом, а именно, как можно изменить стили контекстных блоков Яндекс Директ на вашем сайте. Сразу предупреждаю, что всю ответственность за эти «махинации» вы несете сами. Я складываю с себя всю ответственность за то, что ваш сайт могут забанить в РСЯ или наложить санкции на аккаунт. Надеюсь, я вас не напугал.

Итак, о чем я хочу рассказать и показать сегодня. Для вас я полностью разобрал по составным частям исходный код вывода объявлений, т.е. их верстка, стили, классы. Выделил все важные элементы кода и даже показал это очень подробно на скриншотах. Это будет понятно даже тем людям, кто не разбирается в тонкостях html и css, а кто разбирается, смогут творить что-нибудь нестандартное.

Ну вот как-то так, приступим?

Для примера я взял свой сайт acerfans.ru, на нем и будем «пилить».

Вот так выглядит изначально блок Яндекс Директ:

Оригинальный блок Яндекс Директ

Теперь давайте взглянем на исходный код этого блока:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script type="text/javascript">
//<![CDATA[
yandex_partner_id = 38127;
yandex_site_bg_color = 'FFFFFF';
yandex_site_charset = 'windows-1251';
yandex_ad_format = 'direct';
yandex_direct_type = 'horizontal';
yandex_direct_limit = 2;
yandex_direct_title_color = '4074a4';
yandex_direct_url_color = '222222';
yandex_direct_all_color = '2A71D6';
yandex_direct_text_color = '222222';
yandex_direct_hover_color = 'CC0000';
yandex_direct_favicon = true;
yandex_stat_id = 2;
document.write('<sc'+'ript type="text/javascript" src="http://an.yandex.ru/system/context.js"></sc'+'ript>');
//]]>
</script>
 
<!-- тут начинается все самое интересное -->
<script type="text/javascript" src="http://an.yandex.ru/system/context.js"></script>
<link rel="stylesheet" type="text/css" href="http://an.yandex.ru/resource/context_r495.css">
<script type="text/javascript" src="http://an.yandex.ru/resource/context_static_r495.js" yandex_load_check="yes"></script>
<style type="text/css">
#y5_direct2 .y5_ad div a {color: #4074a4 !important;}
#y5_direct2 .y5_ad div {color: #222222 !important;}
#y5_direct2 .y5_ad span, #y5_direct2 .y5_ad span a {color: #222222 !important;}
#y5_direct2 .y5_all a, #y5_direct2 .y5_how a {color: #2A71D6 !important;}
#y5_direct2 .y5_ad div a:hover {color: #CC0000 !important;}
#y5_direct2 .y5_icon em {background-color: #222222 !important;}
</style>
 
<div id="y5_direct2" class="y5 y5_nf y5_horizontal snap_noshots">
	<div class="y5_bb y5_ads2 y5_no_warnings y5_exp0">
		<div class="y5_h">
			<div class="y5_all">
				<span><a class="snap_noshot" href="http://direct.yandex.ru/search?from=http://acerfans.ru/&amp;ref-page=38127" target="_blank">Все объявления</a></span>
			</div>
			<div class="y5_ya">
				<span class="y5_black"><em>Я</em>ндекс</span>
				<span class="y5_black y5_bg"><a class="snap_noshots" href="http://direct.yandex.ru/?partner" target="_blank">Директ</a></span>
			</div>
		</div>
		<table class="y5_ads">
		<tbody>
		<tr>
			<td class="y5_item">
				<div class="y5_ad">
					<div class="ad-link">
						<img onload="if (this.width &gt; 1) {this.className = 'y5_favicon';}" src="//favicon.yandex.net/favicon/www.memory-market.ru" alt=""><a class="snap_noshot" href="http://an.yandex.ru/count/Swnq38iruti40000ZhcmfDK4XPzE2PK2cm5kGoi1CuYcMGq4YQFuEWIOZ2UU0PsL_4kMeD7vkPAiR3W5YglBoWAbaTWzaRIvRsCDZxCMZve2dxKx1UKBauKDeZQPCukgskOFGeoGr32Wa4Kpf80WUmm0?stat-id=2&amp;test-tag=1073873983" target="_blank">Флешки - USB flash drive</a>
					</div>
					<div>Огромный выбор USB-флэшек. USB flash drive под логотип. MEMORY-MARKET.ru</div>
					<span class="url">www.memory-market.ru&nbsp;&nbsp;·&nbsp; Москва</span>
				</div>
			</td>
			<td class="y5_nbsp"><div></div></td>
			<td class="y5_item">
				<div class="y5_ad">
					<div class="ad-link">
						<img onload="if (this.width &gt; 1) {this.className = 'y5_favicon';}" src="//favicon.yandex.net/favicon/www.100zakazov.ru" alt="" class="y5_favicon"><a class="snap_noshot" href="http://an.yandex.ru/count/Swnq350Egi440000ZhcmfDK4XPzE2PK2cm5kGoi1D8YeJe42YQSqSYkOZ2UU0PsQRmIMeD7vkPAXiWOLYgRNhmwbdBmEaRIvRsCDZxCMZve2dxKx1UKBauKDeZQPCukbSjkLGeoGJ1sWaDGmf80WUmm0?stat-id=2&amp;test-tag=1073873983" target="_blank">Флешки оптом под Ваш логотип</a>
					</div>
					<div>Более 15 000 актуальных товаров. Доставка по Москве. Приятные цены.</div>
					<span class="url">
					<ins class="y5_icon">
					<em style="left:8px!important;top:3px!important;width:3px!important"></em>
					<em style="left:7px!important;top:4px!important;width:5px!important"></em>
					<em style="left:6px!important;top:5px!important;width:5px!important"></em>
					<em style="left:12px!important;top:5px!important;width:1px!important"></em>
					<em style="left:5px!important;top:6px!important;width:3px!important"></em>
					<em style="left:9px!important;top:6px!important;width:1px!important"></em>
					<em style="left:11px!important;top:6px!important;width:1px!important"></em>
					<em style="left:4px!important;top:7px!important;width:3px!important"></em>
					<em style="left:10px!important;top:7px!important;width:1px!important"></em>
					<em style="left:3px!important;top:8px!important;width:3px!important"></em>
					<em style="left:2px!important;top:9px!important;width:3px!important"></em>
					<em style="left:2px!important;top:10px!important;width:4px!important"></em>
					<em style="left:2px!important;top:11px!important;width:3px!important"></em>
					<em style="left:6px!important;top:11px!important;width:1px!important"></em>
					<em style="left:3px!important;top:12px!important;width:1px!important"></em>
					<em style="left:5px!important;top:12px!important;width:1px!important"></em>
					<em style="left:4px!important;top:13px!important;width:1px!important"></em>
					</ins>
					<a class="snap_noshot" href="http://an.yandex.ru/count/Swnq33hvMim40000ZhcmfDK4XPzE2PK2cm5kGoi1D8YeJe42YQSqSYkOZ2UU0PsQRmIMeD7vkPAXiWOLYgRNhmwbdBmEaRIvRsCDZxCMZve2dxKx1UKBauKDeZQPCukhSjkLGeoGJ1sWaDGmf80WUmm0?stat-id=2&amp;test-tag=1073873983" target="_blank">Адрес и телефон</a>&nbsp;&nbsp;·&nbsp; www.100zakazov.ru&nbsp;&nbsp;·&nbsp; Москва</span>
				</div>
			</td>
		</tr>
		</tbody></table>
	</div>
</div>

Получая код для вставки на сайт в своем ЦОП’е, вам нет так много и разрешено менять: помимо формата, типа, количества объявления и favicon, только цвета заголовка, текста, url’а. И все! Но мы-то знаем, что это далеко не все.
Кстати, вы заметили, что иконка телефонной трубки около надписи «Адрес и телефон» рисуется попиксельно! Я офигел, когда первый раз увидел!

Сейчас давайте наглядно посмотрим, какие элементы и стили за что отвечают:

class="y5 y5_nf y5_horizontal snap_noshots"

class="y5_h"

class="y5_all"

class="y5_ya"

class="y5_ads"

class="y5_item"

class="y5_nbsp"

class="y5_item"

class="y5_ad"

class="ad-link"

class="y5_favicon"

class="snap_noshot"

div

class="url"

class="y5_icon"

class="snap_noshot"

Надеюсь, я вас не утомил обилием скриншотов. А для тех, кто ничего не понял, не хотел и даже не старался понимать, вот базовые стили, с помощью которых вы можете изменить вид блока полностью.

1
2
3
4
5
6
7
#ya_direct .y5_all a {} /* "все объявления" */
#ya_direct .y5_ya em {} /* "Я" */
#ya_direct .y5_ya a {} /* "ндекс Директ" */
#ya_direct .ad-link a {} /* "Флешки оптом под Ваш логотип" */
#ya_direct .y5_ad div {} /* "Более 15 000 актуальных товаров. Доставка по Москве. Приятные цены." */
#ya_direct .y5_ad span {} /* "www.100zakazov.ru  •  Москва" */
#ya_direct .y5_ad span a {} /* "Адрес и Телефон" */

Теперь-то все понятно?! Перечисленное выше надо вставить в ваш основной css файл. В фигурных скобках пишем размер шрифта, его оформление и все, что может быть необходимо, не забываем про !important перед закрывающей фигурной скобкой. #ya_direct – это id который надо прописать в div, внутрь которого вы будете вставлять код Директа, выданного вам Яндексом изначально.

Примерно так:

1
2
3
4
5
<div id="#ya_direct" class="">
	<script type="text/javascript">
	...
	</script>
</div>

Информации предостаточно чтобы начать свои эксперименты, так чего же вы ждете ;) Если есть какие-то вопросы или предложения, пишите, не стесняйтесь.

PS Если вас «запалят» с вашим «творчеством», то, скорее всего, сделают предупреждение, но первое и единственное. Если вы не вернете стили к их исходному виду, далее последует бан. Проверено на себе и не только.

PPS В исходном коде есть еще одна интересная деталь, которую, я уверен, вы заметили. Да-да, это файл http://an.yandex.ru/resource/context_r495.css! Я его, по понятным причинам разбирать не буду, а вы, если хотите сломать свой мозг, поковыряйте на досуге. Я поковырял, признаюсь — не понравилось.

PPPS Ништяк я придумал картинку к посту, да ведь? Кто не смотрел фильм Пила (все части, их целых 7) очень рекомендую. Оно того стоит. Мы с Катюхой уже 3 раза все части пересматривали. Каждый раз как в первый раз!

Постовой: Ребята, seo — оно и в Африке SEO. Но про smo никак не стоит забывать ;)

С уважением, Александр Алаев
 
Ерунда и баянЪ!Зачет! Плюсую!
+2
 
Оптимизация сайта

Профессиональный технический аудит и оптимизация вашего сайта.
Тот самый необходимый «фундамент» для успешного продвижения.

от 10 000 руб.
Продвижение сайта

Комплексный подход к решению поставленных задач, будь то достижение заветных позиций в ТОП 10 или увеличение трафика на сайт. В стоимость уже включены полный технический аудит и оптимизация сайта.

от 15 000 руб.
Консультация

У вас недостаточно знаний?
Нужен ответ на ряд вопросов?
Хотите узнать мнение эксперта?
Вы задаете вопрос — я на него отвечаю!

1 500 руб./час
 
Получай новости блога АлаичЪ'а на e-mail:
 
Другие посты из категории SEO:
Что нового на форуме:
  1. Евгенич (83 комм.)

    Иллюстрация к статье выше всяких похвал.

    Ответить
  2. Юрко Блогер (5 комм.)

    Давно не видел столько картинок в мануале! Уже использовал инфу под себя.

    Ответить
  3. Дмитрий Лебедь (1 комм.)

    Отличный мануал, Саш) С РСЯ еще не сотрудничаю, но в будущем понадобиться. Давно в аське тебя не видел...

    Ответить
    • АлаичЪ

      Спасибо. Я думаю, это не может не понадобиться ;) Без этого максимально вписаться в дизайн не получится. Хотя у себя на блоге я данный метод не применял.

      PS Я в аське каждый день кроме выходных... Странно, что ты меня не видишь.

      Ответить
  4. Никита Buzzman (16 комм.)

    Простите, я, как верстальщик со стажем, надеялся на большее, нежели простое изменение css.

    Однако при прочтении статьи сам вывел для себя пару полезностей и даже написал WP-плагин для упрощения вставки кода Яднекс.Директ внутрь статьи.

    Ответить
    • АлаичЪ

      Хм... А чего же тут не хватает? Что есть это самое "большее"? Что я упустил?

      Ответить
      • Никита Buzzman (16 комм.)

        К примеру, какие либо легальные методы, позволяющие привлечь больше внимания на блоки рекламы с целью повышения CTR и заработка. Есть такое?

        Ответить
        • АлаичЪ

          Опасаться санкций стоит только при посещаемость не ниже 10к в сутки. Иначе можете крутить-вертеть ;)

          Из легальных методов — экспериментирование с местом размещения, размером шрифта (стандартными методами), цветовым решением.

          Но это и так все знают, не так ли ;)

          Ах да, еще — количество объявлений в блоке. Я недавно повысил прибыльность контекста на 30% только тем, что изменил количество объявлений. Было два блока с 3 объявлениями в блоке. Оставил так же два блока, но с двумя объявлениями, и шрифт чуток увеличил.

          Ответить
  5. antonio (1 комм.)

    Вот это инфа, появилась идея как неплохо поднять ctr, спасибо за ифу

    Ответить
  6. nserg (2 комм.)

    Кто не смотрел фильм Пила (все части, их целых 7) очень рекомендую. Оно того стоит. Мы с Катюхой уже 3 раза все части пересматривали. Каждый раз как в первый раз!

    Да вы маньяк батенька... ну в смысле кибер-маньяк. А задумка с увеличением шрифта это полезно, положительные моменты записал, Спасибо

    Ответить
    • DarkPrinceArtes (1 комм.)

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

      Ответить
      • nserg (2 комм.)

        а как же нога на картинке?

        Ответить
  7. алексей (1 комм.)

    Да, прям Колумб, кстати такое же и с гугловским блоком проделать можно (и с санкциями мягше) да и вообще со многм такое провернуть можно. Сильно удивлен тем что столько народу об этом не знало и выразило (в том числе и якобы верстальщик со стажем) интузиазизм.

    З.Ы. Чет как то с явным негативом пост получился. Сори если обидел кого.

    Ответить
    • Никита Buzzman (16 комм.)

      " и якобы верстальщик со стажем" — действительно обидел) В оправдание хочу сказать, что "при прочтении статьи сам вывел для себя" новое не в плане изменения css блока, а просто зародилась мысль интересная.

      Ответить
  8. mccats (6 комм.)

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

    Ответить
  9. Владислав (1 комм.)

    Хороший пост. Спасибо. Картинка прикольная: "Яндекс Директ. Игра на выживание".

    Ответить
  10. han (1 комм.)

    Что-то не работают у меня эти стили, может с момента написания статьи поменялась структура блоков?

    Ответить
    • АлаичЪ

      Да, там уже много раз все поменялось...

      Ответить
  11. Adward (1 комм.)

    Нормально так в примере статьи прописано:

    id="#ya_direct"

    голову сломаш пока # нашёл ))))

    сейчас то — всё изменили они? не акутальна инфа уж...

    Ответить
  12. kotkem (1 комм.)

    Установил, но у меня реклама показывает только для зарегистрированных пользователей, а когда выходишь с личного кабинета, то нет рекламы. Бред какой-то. Подскажите пожалуйста, как решить проблему?

    Ответить
Оставь комментарий или спроси через Twitter →

· Малоинформативные комментарии или комментарии, не содержащие вопрос, удаляются.
· В поле URL оставляйте ссылку только на свой сайт/блог. Эта ссылка для админа, посетители ее не увидят.
· Любой html-код отображается в виде текста, любые ссылки неактивны.
· Для спаммеров - БЛОГ НЕ DOFOLLOW!!!