Додому Новини Довільне оформлення контекстних рекламних блоків на прикладі Яндекс Директ

Новини

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

по

20.04.2020

161

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

Отже, про що я хочу розповісти і показати сьогодні. Для вас я повністю розібрав по складовим частинам вихідний код виведення оголошень, т. е. їх верстка, стилі, класи. Виділив всі важливі елементи коду і навіть показав це дуже докладно на скріншотах. Це буде зрозуміло навіть тим людям, хто не розбирається в тонкощах 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

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

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

Приблизно так:

1
2
3
4
5

…

Інформації достатньо щоб почати свої експерименти, так чого ж ви чекаєте 😉 Якщо є якісь питання чи пропозиції, пишіть, не соромтеся.

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

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

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

Постовий: Хлопці, seo — воно і в Африці SEO. Але про smo ніяк не варто забувати 😉

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