Для того, чтобы сделать свой баннер (картинку с привязанным к нему
адресом), нужно написать его код. Этот код потом любой желающий сможет
вставить к себе в блог - в сообщение или на боковую панельку (я уже
писала о том, как вставлять баннер или кнопку в блог).
Как же написать код для баннера?
Для начала нам нужно взять (или нарисовать) изображение, которую хотим сделать нашим баннером. И разместить ее на каком-нибудь общедоступном ресурсе в интернете. Нам для кода понадобится его адрес.
А потом надо написать такой кусочек 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit96QqViztbUKdbrLTxKxGOcezoQMb35bQAs6LlUnYp3hQi2gUjS81fWu9AXlK3i36BsVfyLbvllJcK4XwMLYhGZ0JoLDc1B7J48wAaeFjBBubjtCCcl3eaCf9wAsAwftfSsY2pq4zIkAb/s1600/pochemuchka_mini.jpg" /></a>
</div>
Как же написать код для баннера?
Для начала нам нужно взять (или нарисовать) изображение, которую хотим сделать нашим баннером. И разместить ее на каком-нибудь общедоступном ресурсе в интернете. Нам для кода понадобится его адрес.
А потом надо написать такой кусочек 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit96QqViztbUKdbrLTxKxGOcezoQMb35bQAs6LlUnYp3hQi2gUjS81fWu9AXlK3i36BsVfyLbvllJcK4XwMLYhGZ0JoLDc1B7J48wAaeFjBBubjtCCcl3eaCf9wAsAwftfSsY2pq4zIkAb/s1600/pochemuchka_mini.jpg" /></a>
</div>
Комментариев нет:
Отправить комментарий