logo
  • Опубликовано 8 ноября 2013
  • Комментарии к записи Блок для кнопок отключены

Блок для кнопок

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

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

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

ramka

zaglushka

 

 

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

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

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

<style>.banner {background:url('http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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Рис 1block2Рис 2

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

<tr>
<td align="center" valign="top" width="50%">
<div class="banner"><a href="http://mehelps.ru"><img title="Место свободно" src="http://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="http://mehelps.ru/wp-content/uploads/2013/11/zaglushka.gif" alt="" /></a></div><
/td>
</tr>

 

Блок с кнопками устанавливать  в виджет сайтбара. Всё работает. Если скопированный код не будет работать, то тут только одна причина - кавычки " ". При копировании они могут отличаться, так что исправьте их в редакторе.
Блок для кнопок обновлено: Январь 18, 2015 автором: admin

Обсуждение закрыто.

▲Вверх