понедельник, 12 ноября 2012 г.

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

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

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

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

А потом надо написать такой кусочек 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>

20 комментариев:

  1. Спасибо Вам за интересный блог, он очень полезен, я столько узнала интересного и нужного))

    ОтветитьУдалить
    Ответы
    1. Я рада, что блог оказался вам полезен :)

      Удалить
  2. Спасибо Вам огромное за помощь, и как раз в нужный момент! Первый раз сделала свой собственный баннер :)

    ОтветитьУдалить
    Ответы
    1. Здорово, что в нужный момент :)

      Удалить
  3. Таня, спасибо Вам большое за помощь! Ни раз Ваши посты меня выручали:)Я вручила Вам Кубок Признания! Взять его можно на странице http://mikariscrap.blogspot.ru/2012/12/blog-post_9.html
    Удачи и процветания!

    ОтветитьУдалить
    Ответы
    1. Спасибо большое за награду! Я очень рада, что мой блог вам полезен:)

      Удалить
  4. Все просто, практично, наглядно и доступно! Спасибо огромное!

    ОтветитьУдалить
    Ответы
    1. Рада, что смогла помочь вам :)

      Удалить
  5. Спасибо большое! Уже не первый раз Ваш блог выручает)Каждый раз набираю в поисковике необходимый вопрос, но ответ всегда в итоге нахожу у вас)Отличный блог!

    ОтветитьУдалить
  6. Спасибо большое! А как сделать чтобы код показывался на странице в виде кода, а не баннера?

    ОтветитьУдалить
    Ответы
    1. Рада вас видеть у себя в гостях, я с удовольствием читаю ваш ЖЖ :)
      Попробовала разобраться с вашим вопросом, вот тут можно посмотреть. "Как написать HTML-код в тексте"Если не получится, напишите, будем искать еще.

      Удалить
  7. Спасибо! Я уже сделала с вашей помощью баннер и вставила его в свой ЖЖ. Теперь попробую с кодом разобраться )

    ОтветитьУдалить
  8. Отличный блог!
    Много полезной информации доступным языком!
    Спасибо за Ваш труд!

    ОтветитьУдалить
    Ответы
    1. Спасибо за добрые слова! Я рада, что вам что-то пригодилось :)

      Удалить
  9. Спасибо большое за статью. Все просто и доступно. Спасибо Вам.

    ОтветитьУдалить
  10. Таня, спасибо за этот пост! Нацеленно искала, как сделать баннер, вышла на ваш этот пост, и баннер готов! Очень доступно разъяснено и супер-полезно!

    ОтветитьУдалить

Чтобы оставить комментарий*, напишите текст в окошке и выберите в "Подписи комментария" профиль из любого вашего аккаунта. Если вы нигде не зарегистрированы, выбирайте Имя/URL и просто вводите свое имя - оно отобразится в подписи.

*Оставляя комментарий вы тем самым подтверждаете, что даете свое согласие на обработку своих персональный данных. См. Политика конфиденциальности

Related Posts Plugin for WordPress, Blogger...