суббота, 24 мая 2014 г.

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

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


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>

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