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

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

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

ramka

zaglushka

 

 

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

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

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

Теперь рассмотрим, что находится в этом коде, и что и где вам надо поменять на свои значения. Здесь всё очень просто, этот код состоит из трёх пар кнопок.

1-я строка. Выводит рамку, т.е. больший прямоугольник. Здесь пропишите свой адрес расположения картинки

5 — 10-я строки. Это первая пара кнопок. Код выводит заглушки или непосредственно сами рекламные кнопки. Здесь в http://… прописываете или адрес расположения заглушек или вставляете коды кнопок.

Остальные пары точно такие же и замена адресов такая же.

Ну а теперь приведу пример, как вставлять кнопки кнопки. Для примера я возьму свою кнопку сайта hotlinks.ru Код кнопки выглядит так:

<a href=»http://hotlinks.ru»target=»_blank»><img alt=»Каталог HotLinks.Ru» src=»http://hotlinks.ru/images/hlbutton.gif» border=»0″ height=»31″ width=»88″ /></a>

Вставим этот код кнопки в код нашего блока. Удаляем одну из заглушек и ставим вместо неё код кнопки. Ищем в любой секции кода блока вот такой участок:

<tr>
<td width=»50%» align=»center» valign=»top»>
<div class=»banner»><a href=»/» title=»Место свободно»><img src=»https://mehelps.ru/wp-content/uploads/2013/11/zaglushka.gif«></a></div>
</td>

Вместо выделенного участка вставляем код рекламной кнопки или счетчик статистики:

<tr>
<td width=»50%» align=»center» valign=»top»>
<div class=»banner»>
<a href=»http://hotlinks.ru»target=»_blank»><img alt=»Каталог HotLinks.Ru» src=»http://hotlinks.ru/images/hlbutton.gif» border=»0″ height=»31″ width=»88″ /></a></div>
</td>

Смотрим, что у нас получится:

block1Рис 1 block2Рис 2

Если у Вас кнопок будет больше, то просто добавьте в код несколько вот таких участков:

<tr>
<td align="center" valign="top" width="50%">
<div class="banner"><a href="https://mehelps.ru"><img title="Место свободно" src="https://mehelps.ru/wp-content/uploads/2013/11/zaglushka.gif" alt="" width="88" height="31" border="0" /></a></div>
</td>
<td align="center" valign="top" width="50%">
<div class="banner"><a title="Место свободно" href="/"><img src="https://mehelps.ru/wp-content/uploads/2013/11/zaglushka.gif" alt="" /></a></div><
/td>
</tr>

Блок с кнопками устанавливать в виджет сайтбара. Всё работает. Если скопированный код не будет работать, то тут только одна причина — кавычки » «. При копировании они могут отличаться, так что исправьте их в редакторе.
 

Статья была полезной?