Большинство партнёров нашей партнёрской сети, работающих в разделе Микс-Товары с контекстными объявлениями, не уделяют должного внимания оформлению внешнего вида рекламных блоков, просто размещая их как есть, а ведь хорошо оформленные объявления могут существенно увеличить доход!

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

В настройках рекламных блоков «Контекстный товар» есть вот такой блок, где можно указать нужные стили или вовсе сформировать блок по своим правилам.

В левой части мы видим стандартный шаблон одной ячейки блока, где в определённых местах указаны теги, которые отвечают за вывод того или иного элемента рекламного блока:

1. <%PICT%> – Картинка
2. <%NAME%> – Название товара
3. <%DESC%> – Описание товара
4. <%PRICE%> – Цена товара
5. <%MERCH%> – Адрес интернет магазина

Что бы было проще понять, как выглядит код блока целиком, я приведу его ниже:

<div id="mixkt_xxxxxxxxxx">
  <table id="xxxxxxxxxx_xxx" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td>
        <!-- Код настраеваемый в интерфейсе системы -->
        </td>
      </tr>
      <tr>
        <td>
        <!-- Код настраеваемый в интерфейсе системы -->
        </td>
      </tr>
      <tr>
        <td>
        <!-- Код настраеваемый в интерфейсе системы -->
        </td>
      </tr>
    </tbody>        
  </table>
</div>

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

<table cellpadding="5">
  <tr>
    <td width="100" align="center">< %PICT%></td>
    <td valign="top">< %NAME%> - < %PRICE%><br /><br />< %DESC%><br />< %MERCH%></td>
  </tr>
</table>

где вместо всех технических тегов будут подставлены соответствующие элементы в виде картинок, ссылок или текста.

Есть два способа настроить оригинальное оформление блоков.

Первый, указать в «Настройках специальных классов» (на первой картинке справа) классы для каждого элемента и прописать их в CSS, при этом оставить код из правой части на картинке без изменения. Этот способ достаточно простой и банальный, поэтому не позволяет развернуться на полную катушку.

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

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

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

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

Шаг первый – Дизайн рекламного блока

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

Вот что родилось буквально около часа назад:

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

Шаг второй – Вёрстка рекламного блока

Я покажу пример, как подобные вещи верстаются на DIV`ах, которые уже давно потеснили не совсем удобную табличную вёрстку. К сожалению, в рамках этого поста я не смогу научить вас вёрстке, поэтому просто покажу, как всё оформляется в коде и как в итоге выглядит в уже свёрстанном виде.

Сначала выбираем нужный товарный блок в своём интерфейсе и в поле «Код HTML» заменяем стандартный код на следующий:

<div class="mix-block">
  < %PICT%>
  <div class="mm-right">
    <div class="mm-name">< %NAME%></div>
    <div class="mm-price">
      <div class="l"></div>
      <div class="c">< %PRICE%></div>
      <div class="r"></div>
      <div style="clear:both;"></div>
    </div>
    <div class="mm-merch">< %MERCH%></div>
  </div>
  <div style="clear:both;"></div>
</div>

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

Стили выглядят следующим образом:

div.mix-block{
	background:#fff;
	width:240px;
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:10px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=95);
	-moz-opacity:0.95;
	-khtml-opacity:0.95;
	opacity:0.95;
}
div.mix-block img{
	width:70px;
	height:auto;
	margin:10px 0px 10px 10px;
	text-align:center;
	float:left;
	position:relative;
	display:block;
}
div.mm-right{
	float:right;
	width:140px;
	margin-right:10px;
}
div.mm-name a{
	display:block;
	color:#005073;
	font-size:15px;
	line-height:18px;
	text-decoration:none;
	padding:8px 0px 12px 0px;
}
div.mm-name a:hover, div.mm-merch a:hover{
	text-decoration:underline;
}
 
div.l{
	width:2px;
	height:30px;
	background:url(l.jpg) no-repeat;
	float:left;
}
div.c{
	background:#ffc629;
	float:left;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	padding:7px 4px 7px 9px;
}
div.r{
	width:18px;
	height:30px;
	background:url(r.jpg) no-repeat;
	float:left;
}
div.mm-merch a{
	display:block;
	font-size:11px;
	color:#999;
	text-decoration:none;
	padding:7px 0px 7px 0px;
}

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

А вот как в итоге выглядит уже свёрстанный рекламный блок, с реальными рекламными предложениями:

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

Файл стилей и 2 маленькие картинки вы можете скачать по этой ссылке.

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

Если вы не умеете и не хотите учиться делать подобные вещи сами или у вас попросту нет на это времени, то данную услугу можно заказать через раздел бонусов, называется она там «Оригинальное оформление блоков «Контекстный товар»».

Будем рады услышать ваши объективные замечания и комментарии.