Бегун в телевизоре.

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

Перво-наперво, хочу сказать, что рад приветствовать своих читателей в новом году, желаю им всего наилучшего и особенно успехов в работе :)

Закончен очередной рабочий перерыв, и опять пришло время делиться своими наблюдениями.

Недавно я работал над одним из своих сайтов, и у меня получился довольно-таки веселенький дизайн. Осмотрев его со всех сторон и показав друзьям, я решил, что он мне нравится, и что я оставлю его как конечный вариант для этого сайта. При этом тематика сайта была достаточно серьезной - промышленно-финансовой, и информация в "официальном" стиле и дизайн в "мультяшном" стиле контрастировали между собой. Решением этой проблемы стало использование на страницах сайта вот такого телевизора:

Рис. 1. Мой любимый телевизор.

Можно сказать, что после того, как этот телевизор появился на свет, он стал главным героем сайта. На этом мои эксперименты с дизайном закончились, и началась техническая работа, которая продолжалась до тех пор, пока не пришло время ставить на сайт объявления бегуна. Конечно, компания бегун является одной из самых передовых, и настройка внешнего вида объявлений бегуна является очень гибкой, но, тем не менее, размещение обычного объявления (даже с включенной опцией "уменьшенные изображения сайтов рекламодателей") на этом сайте выглядело скучно. И тогда мне пришла в голову следующая мысль - а что если "уменьшенные изображения сайтов рекламодателей" будет показывать мой любимый телевизор?

Существует 2 пути решения это вопроса. Первый заключается в том, чтобы позиционировать изображение телевизора и объявление бегуна таким образом, чтобы одно накладывалось на другое. Это самый легкий и самый некрасивый способ, так как при этом фоновая картинка закрывается цветом фона объявления и на нее наползает текст:

Рис. 2. Наложение контекстного объявления на фоновое изображение.



Такой внешний вид совершенно не соответствовал моей задумке, и поэтому я использовал другой способ, основанный на исследовании объектной модели документа и CSS.
В исследовании мне помогли мой любимый браузер FireFox и не менее любимое дополнение к нему Web Developer.
Рис. 3. Web Developer - дополнение к FireFox.

Известно, что обычным способом в браузере невозможно просмотреть текст объявлений и стили, которые использует бегун. Поэтому, воспользовавшись Web Developer, я просмотрел DOM фрагмент документа (т.е. не только исходный код документа, но также те участки когда, которые вставляются в него с помощью JavaScript (или других подобных script :)). В DOM фрагменте мне удалось найти текст объявлений бегуна и названия используемых ими CSS-классов. Вот некоторые из них:

Класс .bgthumb Данный класс отвечает за показ "уменьшенных изображений сайтов рекламодателей". Для того, чтобы уменьшенное изображение показывалось "как будто в телевизоре", я переопределил этот класс в своем css-документе следующим образом:

.bgthumb
{
background: #FFFFFF;
background-image: url('/путь к изображению телевизора/lb-image.jpg');
background-repeat: no-repeat;
padding: 50px 23px 16px 55px;
}

Вот что у меня получилось:
Рис. 4. Наложение "уменьшенного изображения сайтов рекламодателей" на фоновую картинку.

Уже намного лучше, не правда ли?



Немного не к месту смотрится рамочка вокруг изображения телевизора и объявление, выровненное не по центру.

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

Классом вышестоящего элемента begunRoot является класс .bgul1. Для того, чтобы убрать изображение, переопределим класс для тэга <img> внутри этого класса:

.bgul1 img{border: 0px solid black!important;}

В результате этого получилось следующее:


Рис. 5. Изображения сайтов рекламодателей без рамочек.

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

За внешний вид текста объявления отвечает тэг <div> с классом .bgbanner. Для того, чтобы добиться нужного мне эффекта, я сделал следующее - сдвинул текст на 50 пикселей вниз:

.bgbanner{padding-top: 50px;}

Все, конечный результат получен - да здравствует begun-tv! :)

Рис. 6. Begun-tv :)

Конечно, после таких манипуляций над исходным видом объявлений, я не преминул написать в службу технической поддержки бегуна, дабы узнать, могу ли я пользоваться таким внешним видом. При этом я особо подчеркнул, что в код бегуна никаких изменений не вносилось и просматриваются все заглушки, т.е. целостность объявлений не нарушена.

Ответ службы поддержки был следующим:

"Здравствуйте.

Да, Вы можете так сделать, если "в код бегуна
никаких изменений не введено, просматриваются все заглушки".".

Ну что ж, я уже знаю, каким будет
следующее мое фоновое изображение, а вы?