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

Отже, про що я хочу розповісти і показати сьогодні. Для вас я повністю розібрав по складовим частинам вихідний код виведення оголошень, т. е. їх верстка, стилі, класи. Виділив всі важливі елементи коду і навіть показав це дуже докладно на скріншотах. Це буде зрозуміло навіть тим людям, хто не розбирається в тонкощах 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”>
// 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(”); //]]>
</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/&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 > 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&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 · Москва</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 > 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&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&test-tag=1073873983” target=“_blank”>Адреса і телефон</a> · www.100zakazov.ru · Москва</span>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>

// #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;}
Всі оголошення
Яндекс
Директ

Флешки – USB flash drive
Величезний вибір USB-флешок. USB flash drive під логотип. MEMORY-MARKET.ru
www.memory-market.ru · Москва
Флешки оптом під Ваш логотип
Більше 15 000 актуальних товарів. Доставка по Москві. Приємні ціни.

Адреса і телефон · www.100zakazov.ru · Москва

Отримуючи код для вставки на сайт у своєму ЦОП’е, вам немає так багато і дозволено міняти: крім формату, типу, кількості оголошення і favicon, тільки кольори заголовка, тексту, до а. І все! Але ми-то знаємо, що це далеко не все.
До речі, ви помітили, що іконка телефонної трубки близько написи «Адреса та телефон» малюється попіксельно! Я офігів, коли перший раз побачив!

Зараз давайте наочно подивимося, які елементи і стилі за що відповідають:

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

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 {} /* “Адреса та Телефон” */

#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 ніяк не варто забувати 😉

З повагою, Олександр Алаєв