Для того, чтобы сделать свой баннер (картинку с привязанным к нему адресом), нужно написать его код. Этот код потом любой желающий сможет вставить к себе в блог - в сообщение или на боковую панельку (я уже писала о том, как вставлять баннер или кнопку в блог).
Как же написать код для баннера?
Для начала нам нужно взять (или нарисовать) изображение, которую хотим сделать нашим баннером. И разместить ее на каком-нибудь общедоступном ресурсе в интернете. Нам для кода понадобится его адрес.
А потом надо написать такой кусочек 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>
Как же написать код для баннера?
Для начала нам нужно взять (или нарисовать) изображение, которую хотим сделать нашим баннером. И разместить ее на каком-нибудь общедоступном ресурсе в интернете. Нам для кода понадобится его адрес.
А потом надо написать такой кусочек 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>
Спасибо Вам за интересный блог, он очень полезен, я столько узнала интересного и нужного))
ОтветитьУдалитьЯ рада, что блог оказался вам полезен :)
УдалитьСпасибо Вам огромное за помощь, и как раз в нужный момент! Первый раз сделала свой собственный баннер :)
ОтветитьУдалитьЗдорово, что в нужный момент :)
УдалитьТаня, спасибо Вам большое за помощь! Ни раз Ваши посты меня выручали:)Я вручила Вам Кубок Признания! Взять его можно на странице http://mikariscrap.blogspot.ru/2012/12/blog-post_9.html
ОтветитьУдалитьУдачи и процветания!
Спасибо большое за награду! Я очень рада, что мой блог вам полезен:)
УдалитьВсе просто, практично, наглядно и доступно! Спасибо огромное!
ОтветитьУдалитьРада, что смогла помочь вам :)
УдалитьСпасибо большое! Уже не первый раз Ваш блог выручает)Каждый раз набираю в поисковике необходимый вопрос, но ответ всегда в итоге нахожу у вас)Отличный блог!
ОтветитьУдалитьСпасибо за добрые слова :)
УдалитьСпасибо большое! А как сделать чтобы код показывался на странице в виде кода, а не баннера?
ОтветитьУдалитьРада вас видеть у себя в гостях, я с удовольствием читаю ваш ЖЖ :)
УдалитьПопробовала разобраться с вашим вопросом, вот тут можно посмотреть. "Как написать HTML-код в тексте"Если не получится, напишите, будем искать еще.
Спасибо! Я уже сделала с вашей помощью баннер и вставила его в свой ЖЖ. Теперь попробую с кодом разобраться )
ОтветитьУдалитьОтличный блог!
ОтветитьУдалитьМного полезной информации доступным языком!
Спасибо за Ваш труд!
Спасибо за добрые слова! Я рада, что вам что-то пригодилось :)
УдалитьСпасибо большое за статью. Все просто и доступно. Спасибо Вам.
ОтветитьУдалитьРада, что было полезно)
УдалитьТаня, спасибо за этот пост! Нацеленно искала, как сделать баннер, вышла на ваш этот пост, и баннер готов! Очень доступно разъяснено и супер-полезно!
ОтветитьУдалитьОчень рада, что пригодилось :)
УдалитьБольшое спасибо!
ОтветитьУдалить