Размещение баннера на блоге

*Иногда требуется на блоге разместить несколько баннеров (картинка и гиперссылка на ней) подряд (см. рисунок слева). Кажется, что это  так просто: вставляешь картинку с гиперссылкой, при этом у каждого такого гаджета должно быть обязательно название (см. рисунок справа), а оно не всегда и нужно.

Выход всегда есть. Только для этого понадобится немного знания программирования.

1. Переходим в Настройки блога, затем находим Дизайн и добавляем гаджет (1).

2. Из списка, доступных гаджетов, выбираем html/javaScript (2)  и нажимаем +.

.

3. Указываем название (3).

4. Затем вставляем скопированный текст:

<style>
  img.big {
    cursor: pointer;
    max-width: 200px;
  }
  img.big:hover {
    max-width: 200;
  }
</style>
<center><table>

  <tr>
   <td>
<a href="Указываем гиперссылку на источник (4)"><img
 class="big" src="Указываем ссылку на картинку (5)" title="Указываем название картинки при наведении мыши (6)" /></img
></a>
  </td>

</tr>

</table></center>

Удаляем и прописываем вместо красного шрифта свои данные. Обратите внимание, на некоторые позиции:

- (4) гиперссылка должна быть прописана полностью, например, http://krivenkaya.blogspot.ru/,

- (5) прежде, чем указывать ссылку на изображение, ее надо загрузить на Goolge+ или на Google Диск. Например, http://1.bp.blogspot.com/gdhfj....1.ipg.

Если источник неизвестен, то можно скопировать ссылку на него, использовав контекстное меню

 - (6) Если вы не хотите, чтобы при наведении мыши у вас появился текст, то просто удалите текст, выделенный красным цветом.

Если вам нужна еще одна картинка, то скопируйте код от тега <tr> до </tr> (включая сами теги) и вставьте перед тегом </table>. Например:

<...>
   <tr>Первая картинка с гиперссылкой
   <td>
<a href="Указываем гиперссылку на источник (4)"><img
 class="big" src="Указываем ссылку на картинку (5)" title="Указываем название картинки при наведении мыши (6)" /></img
></a>
  </td>

</tr>

<tr>Вторая картинка с гиперссылкой
  <td>
<a href="Указываем гиперссылку на источник (4)"><img
 class="big" src="Указываем ссылку на картинку (5)" title="Указываем название картинки при наведении мыши (6)" /></img
></a>
  </td>

</tr>

 

</table></center>

Как только закончили вносить изменения к код, нажимаем Сохранить.