Как сделать свой баннер

Для того, чтобы сделать свой баннер (картинку с привязанным к нему адресом), нужно написать его код. Этот код потом любой желающий сможет вставить к себе в блог - в сообщение или на боковую панельку (я уже писала о том, как вставлять баннер или кнопку в блог).

Как же написать код для баннера?

Для начала нам нужно взять (или нарисовать) изображение, которую хотим сделать нашим баннером. И разместить ее на каком-нибудь общедоступном ресурсе в интернете. Нам для кода понадобится его адрес.

А потом надо написать такой кусочек HTML-кода, который и предложить вставлять другим людям в их блоги:

<a href="http://адрес, на который перейдет человек после нажатия на баннер "target="_blank" title="текст, который будет появляться после наведения на баннер мышки"><img src="http://адрес изображения" /></a>

Это самый простой вариант. Но в нем нужно учесть, что наше изображение будет вставлено того размера, как оно есть. Поэтому нужно сразу делать его того размера, какой вы хотите видеть на экране. Это оптимально с точки зрения быстроты загрузки картинки.
Можно немного скорректировать код и добавить параметры изображение - ширину (width) и высоту (height). Тогда в сети вы можете разместить изображение любого размера, а уже в самом коде задать нужные длины и даже рамочку (border). Если не указать что то из  width или height, то картинка будет смасштабированна пропорционально до соответствия оставшемуся размеру.

<a href="http://адрес, на который перейдет человек после нажатия на баннер "target="_blank" title="текст, который будет появляться после наведения на баннер мышки"><img src="http://адрес изображения" width="200" height="200" border="0" /></a>.

Для того, чтобы баннер сам становился по центру строки текста (если добавлять его будут прямо в текст сообщения), его нужно заключить в такие строчки:

<div style="text-align: center;">
код для баннера
</div>

Пример моего баннера:

Я сделала баннер по первому варианту, взяв адрес нужной картинки уже подготовленного размера прямо из поста в блоге.


<div style="text-align: center;">
<a href="http://ta-vi-ka.blogspot.com/p/blog-page_31.html" target="_blank" title="Клуб почемучек"><img src="http://3.bp.blogspot.com/-U4d_HUW-7Rk/UID8eHRPznI/AAAAAAAAQMA/DoR2nfPfG8Y/s1600/pochemuchka_mini.jpg" /></a>
</div>

Тэги: blogger, html