Здравствуйте! Рада приветствовать Вас в блоге! Надеюсь, Вам будет интересно! Отвечу на каждый Ваш комментарий!

Все участия-победы блога в конкурсах:

пятница, 10 января 2014 г.

Как создать и установить авторский баннер? И ещё одна подсказка...

Баннер (англ. banner — флаг, транспарант) — графическое изображение рекламного характера. Баннер — один из преобладающих форматов интернет-рекламы. Представляет собой графическое изображение, аналогичное рекламному модулю в прессе, но способное содержать анимированные (редко видео-) элементы, а также являющееся гиперссылкой на сайт рекламодателя или страницу с дополнительной информацией (источник).
Сегодня мне хотелось бы поделиться с Вами собственным опытом: как создать и установить в свой блог баннер.
Если баннер предложен сторонним ресурсом (ссылка на конкурс-викторину-сайт), то просто вставляем предложенный нам код с помощью гаджета "HTML/JavaScript" ("Дизайн"-- "Добавить гаджет"-- "HTML/JavaScript"):

А если мы хотим создать СОБСТВЕННЫЙ баннер? Например, проекта, проходящего в блоге, или баннер собственного блога. Как его создать и установить?

Есть несколько распространённых способов:
1. Самый простой не требующий временных затрат способ - вставить картинку и установить гиперссылку при нажатии (например, у меня в блоге так установлена ссылка на блог моего класса сбоку на левой панели).
2. Воспользоваться генератором баннеров на стороннем сайте (например, как описано в статье Солодёнковой Г.С. здесь) и вставить в свой блог вышеописанным способом.
3. А можно самому создать картинку в любом графическом редакторе и использовать её в качестве баннера. Посмотрите на разделы "Совместные проекты" или "Автор рекомендует" на правой панели моего блога. Эти баннеры созданы собственноручно.

И от тех, что установлены первыми двумя способами, они отличаются наличием вспомогательного текста, который возникает при наведении мышкой на баннер. Нужен ли этот текст? Решать Вам, но ведь не всегда и всё получается разместить на самой картинке.


Итак, у нас есть созданная нами картинка (но вот ничего не могу с собой поделать - очень удобно создавать картинки с подписями с помощью презентации Microsoft PowerPoint!), есть ссылка, куда должен вести баннер, придуман небольшой поясняющий текст, который будет всплывать при наведении на картинку. Осталось всё это объединить и вставить в блог.

Долгое время я делаю это с помощью вот такого кода:

<a href="ССЫЛКА" title="ПОЯСНЯЮЩИЙ ТЕКСТ" target="_blank"><img src="ссылка на КАРТИНКУ" width="130" height="130" border="0" /></a>

Зелёным я выделила размеры баннера, их можно настроить самостоятельно. Обращаю внимание на исключительную аккуратность при работе с кодом: ни один символ не должен потеряться!


Пример. Вот так выглядит код баннера проекта "Блоги для блогеров", узнали составляющие?

<a href="http://geografo4ka.blogspot.com/2013/07/blogi-dlya-blogerov.html" title="Самые лучшие блоги для блогеров: гаджеты, советы, нововведения" target="_blank"><img src="http://4.bp.blogspot.com/-_IurnW8aib4/UdqSW1jyfJI/AAAAAAAAUSU/lXsZ7GyL98o/s200/%D0%B1%D0%BB%D0%BE%D0%B3%D0%B8+%D0%B4%D0%BB%D1%8F+%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5%D1%80%D0%BE%D0%B2.jpg" width="130" height="130" border="0" /></a>


Вас может удивить столь длинная ссылка на картинку. Хочу дать небольшую, но очень полезную подсказку - КУДА МОЖНО РАЗМЕЩАТЬ КАРТИНКИ, ссылки на которые Вам могут потребоваться - вставить их в комментарии, или в баннер, или просто поделиться с кем-то картинкой. 
Я создала в блоге страницу "Черновик". Но не опубликовала её, а именно туда обычным способом вставляю все необходимые картинки (как в сообщение). После того, как картинка появляется в сообщении, я нажимаю на неё правой кнопкой мышки и выбираю "Копировать URL". Потом сохраняю внесённые изменения (без публикации!) и использую полученную ссылку. Мне никто не показывал этот способ, дошла своей головой, но очень уж он удобный - картинки не исчезают, нет проблем с их размещением и хранением, не надо искать сайт, куда их можно "залить", вводить САРТСНА...

Вот и всё... У Вас теперь есть код собственного баннера с всплывающим дополнительным текстом, вставляем его в блог, делимся с коллегами!

Поделившись с Вами, решила создать и баннер своего блога. Вот, что у меня получилось:

<a href="http://geografo4ka.blogspot.com/" title="ГЕОГРАФОЧКА - блог учителя географии Казанцевой Лилии Павловны" target="_blank"><img src="https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-VaBq3J-3dkA%2FU7J1tVIweQI%2FAAAAAAAAfV0%2F7njmDlU16bo%2Fs1600%2Flipaka.png&container=blogger&gadget=a&rewriteMime=image%2F*" width="200" height="50" border="0" /></a>


Я надеюсь, что эта информация Вам пригодится!
Буду рада прочитать Ваш отклик!



22 комментария:

  1. Лилия Павловна, добрый день. С вашего позволения я вставлю в свой последний пост ссылку на это ваше сообщение. Будет прекрасным дополнением, тем более я о таком способе создания баннеров не знала. Спасибо за информацию.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Галина Станиславовна!
      Конечно, вставляйте! Так получится больше пользы. Ведь если кто-то захочет, то можно картинку для баннера создать не с помощью Microsoft PowerPoint, а с помощью любого генератора баннеров.

      Удалить
  2. Спасибо, Лилия Павловна! Особенно за "черновик"! Просто и эффективно!

    ОтветитьУдалить
    Ответы
    1. Ирина Александровна, благодарю за отклик! Просто недавно себя поймала на мысли, что вдруг не все знают, насколько это удобно...

      Удалить
  3. Здравствуйте, Лилия Павловна! Закрытие филиала АГПА в Краснодаре определенно усложнило жизнь. Укоротившиеся почему-то сутки лишь ухмыляются - попробуй догони.
    Но тема создания баннеров не давала мне покоя с того времени, как я начала вести блог. И даже есть мечта - сделать баннер АС. Теперь он у меня будет благодаря, конечно, Вам. Как скоро, не знаю, но это уже не так важно. Главное, теперь "шпаргалка" всегда, как говорят, под рукой.
    Спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Добрый день, Надежда Александровна!
      Так давайте попробуем исполнить мечту! Самое главное - сделать картинку для баннера, такую, чтобы уже при первом беглом взгляде на неё ассоциировалась с Вашим блогом! Может, какой-то элемент заставки использовать и надпись (название блога) красочную?
      Тут размер каждый потом подстроит под свой блог, тем и удобен третий (мой) способ создания и установки баннера.
      С интересом буду ждать, что у Вас получится! Ведь такой баннер можно и на сайт школы поставить....

      Удалить
    2. Сделала, Лилия Павловна. Только боюсь, что картинку приспичит поменять...

      Удалить
    3. Надежда Александровна, видела! Классно получилось!
      У меня была идея поставить после сообщений в ГЕОГРАФОЧКЕ ряд баннеров блогов коллег. Если будет хотя бы несколько, обязательно поставлю. Ваш первый! А какой он красивыыыыый!!!!

      Удалить
    4. Спасибо Вам, Лилия Павловна! Сделала и баннер сайта школы, о чем долго думала, но понятия не имела как его сделать, и Блогосферы, откорректировала (опять таки благодаря Вашей статье) баннер Блога Ассоциации... Немного растянутым получился "Блоги для блогеров", но уж очень хочется все баннеры одного размера. Хотя кажется, что просто эффект картинки "вглубь". В общем, моя благодарность Вам не знает границ (о чем не забыла сообщить в Блогосфере)
      СПАСИБО!!!

      Удалить
    5. Рада, что Вам пригодилось написанное!
      Надежда Александровна, вот только к величайшему сожалению не получится сделать все баннеры одинаковыми по размерам БЕЗ искажения. Ведь если привести квадратное изображение к вытянутому, то оно растянется и получится не очень красиво... В идеале размещать баннеры в две колонки - отдельно квадратные и прямоугольные)))

      Удалить
    6. Да, Лилия Павловна, Вы как всегда правы. Исправила. Действительно - квадратный гораздо лучше смотрится

      Удалить
    7. Надежда Александровна, конечно, можно и не менять, ведь самое главное, как ВАМ нравится ;)

      Удалить
  4. Добрый вечер, Лилия Павловна! Чаще всего я пользовалась первым способом. Спасибо за подсказку, обязательно воспользуюсь Вашим советом и опробую второй способ

    ОтветитьУдалить
    Ответы
    1. Добрый день, Светлана Анатольевна (вот ведь разница во времени как сказывается ;) )!
      Я думаю, что можно попробовать все три способа, чтобы потом выбрать наиболее понравившийся! Рада, что статья была Вам полезна!

      Удалить
  5. Добрый день, Лилия Павловна, все сделала, как у Вас в третьем способе, но картинка не отображается:-(((

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Ольга Александровна!
      Удивительно, что не получается...
      Попробуйте скопировать из статьи и вставить к себе в блог коды баннеров ГЕОГРАФОЧКИ и проекта для блогеров. Посмотрите, получилось или нет. Если получилось, то ищите ошибку в своём коде (часто лишний пробел или буква могу помешать), если не получилось, то, возможно, проблемы в шаблоне самого блога? Потом, конечно, не забудьте удалить ненужные попытки ;)

      Удалить
  6. Лилия Павловна, так тоже пробовала, НИКАК((( И даже здесь пробовала http://www.bannerfans.com/, - аналогично(((

    ОтветитьУдалить
  7. Лилия Павловна! Спасибо! Всё получилось!!!!

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

      Удалить
  8. Лилия Павловна, спасибо, что пригласили! Обязательно на досуге прочитаю и изучу досконально!!!! :)

    ОтветитьУдалить
  9. Здравствуйте, Лилия Павловна! Спасибо большое за освещение темы, как всегда Ваша помощь подоспела вовремя, закралась мысль о кнопочке блога, обратилась за советом к Ольге Александровне Папулиной и она дала ссылку на Ваш пост! Очень благодарна!!! Спасибо, что освещаете такие нужные темы! Кнопочку уже делаю)))))

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Людмила Владимировна!
      Очень рада, что Вам информация пригодилась! Обязательно загляну в Ваш блог посмотреть нововведения!

      Удалить

Тема сообщения Вас затронула?
Обязательно напишите, что Вы об этом думаете, ведь именно Ваше мнение очень важно для меня!

Хотите вставить в комментарий картинку?
Легко! Используйте теги:
[im#]ссылка на изображение[/im]

Когда не хватает слов в комментариях...

:) :( ;) :D :-/ :x :P :-* =(( :-O X( :7 B-) #:-S :(( :)) =)) :-B :-c :)] :-h I-) =D7 @-) :-w 7:P 2):) :!! \m/ :-q :-bd ^#(^