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

Баннер (англ. 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgay3rq7NZyn-3JBDnETZ_jJzIIqRTPkVMc0npfTTMq7XYy1G641uccEdiSlpM2wtHpCtx0HfTvWjec2MJmPdIG1RyDPnNrwuS_Z6gmBEgXz2Nvc0Cjq1lFLHVMom9MYIP5WLGQPwphGejw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicYH-rUgR8XFiEn1L178JOK6an7I21mCzDVBCKhNm1qbDdu8-NiCiGAgFlK4kdvK2r5D7rK-O4rCzqEcsirG2MEXLAA-YgqLZVSSsqAQzvpkb1JprFn1CTpe7pi88z0iye8swkxZFWl3w/s1600/lipaka.png" width="200" height="50" border="0" /></a>

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

Буду рада прочитать Ваш отклик!

#УчимсясГеографочкой