Сегодня мне хотелось бы поделиться с Вами собственным опытом: как создать и установить в свой блог баннер.
Если баннер предложен сторонним ресурсом (ссылка на конкурс-викторину-сайт), то просто вставляем предложенный нам код с помощью гаджета "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/AVvXsEjxLry5IuYk6nnab-O-FN7WNdPMc0IIpdY8SZhN-UpEhyGS5_6_ufyAu_tRxY9sD_e6TvnnX9o9gSjmE73DIl6sqdRg3dGH2XEH4s1xkc2IHPpsB_4rmh_E0nAig3EcUV6p8JIl17J8E_fK/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/AVvXsEiGCnsI2MibN-5plMrXh2e6-3d3736aZMG1ID2pNo_i5-Y4w-JeXBC4XNnohHoYmmLSGQOh4So9dEmBxY6SjBzvPsa6evfV56ZGw-dkO7hmyw-rg3AMar9kmMiY94mC7WAm4AlgSRQ2cm8/s1600/lipaka.png" width="200" height="50" border="0" /></a>
Я надеюсь, что эта информация Вам пригодится!
Буду рада прочитать Ваш отклик!