Сегодня мне хотелось бы поделиться с Вами собственным опытом: как создать и установить в свой блог баннер.
Если баннер предложен сторонним ресурсом (ссылка на конкурс-викторину-сайт), то просто вставляем предложенный нам код с помощью гаджета "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>
Я надеюсь, что эта информация Вам пригодится!
Буду рада прочитать Ваш отклик!
#УчимсясГеографочкой
:)
:(
;)
:D
:-/
:x
:P
:-*
=((
:-O
X(
:7
B-)
#:-S
:((
:))
=))
:-B
:-c
:)]
:-h
I-)
=D7
@-)
:-w
7:P
2):)
:!!
\m/
:-q
:-bd
^#(^
Лилия Павловна, добрый день. С вашего позволения я вставлю в свой последний пост ссылку на это ваше сообщение. Будет прекрасным дополнением, тем более я о таком способе создания баннеров не знала. Спасибо за информацию.
ОтветитьУдалитьЗдравствуйте, Галина Станиславовна!
УдалитьКонечно, вставляйте! Так получится больше пользы. Ведь если кто-то захочет, то можно картинку для баннера создать не с помощью Microsoft PowerPoint, а с помощью любого генератора баннеров.
Спасибо, Лилия Павловна! Особенно за "черновик"! Просто и эффективно!
ОтветитьУдалитьИрина Александровна, благодарю за отклик! Просто недавно себя поймала на мысли, что вдруг не все знают, насколько это удобно...
УдалитьЗдравствуйте, Лилия Павловна! Закрытие филиала АГПА в Краснодаре определенно усложнило жизнь. Укоротившиеся почему-то сутки лишь ухмыляются - попробуй догони.
ОтветитьУдалитьНо тема создания баннеров не давала мне покоя с того времени, как я начала вести блог. И даже есть мечта - сделать баннер АС. Теперь он у меня будет благодаря, конечно, Вам. Как скоро, не знаю, но это уже не так важно. Главное, теперь "шпаргалка" всегда, как говорят, под рукой.
Спасибо!!!
Добрый день, Надежда Александровна!
УдалитьТак давайте попробуем исполнить мечту! Самое главное - сделать картинку для баннера, такую, чтобы уже при первом беглом взгляде на неё ассоциировалась с Вашим блогом! Может, какой-то элемент заставки использовать и надпись (название блога) красочную?
Тут размер каждый потом подстроит под свой блог, тем и удобен третий (мой) способ создания и установки баннера.
С интересом буду ждать, что у Вас получится! Ведь такой баннер можно и на сайт школы поставить....
Сделала, Лилия Павловна. Только боюсь, что картинку приспичит поменять...
УдалитьНадежда Александровна, видела! Классно получилось!
УдалитьУ меня была идея поставить после сообщений в ГЕОГРАФОЧКЕ ряд баннеров блогов коллег. Если будет хотя бы несколько, обязательно поставлю. Ваш первый! А какой он красивыыыыый!!!!
Спасибо Вам, Лилия Павловна! Сделала и баннер сайта школы, о чем долго думала, но понятия не имела как его сделать, и Блогосферы, откорректировала (опять таки благодаря Вашей статье) баннер Блога Ассоциации... Немного растянутым получился "Блоги для блогеров", но уж очень хочется все баннеры одного размера. Хотя кажется, что просто эффект картинки "вглубь". В общем, моя благодарность Вам не знает границ (о чем не забыла сообщить в Блогосфере)
УдалитьСПАСИБО!!!
Рада, что Вам пригодилось написанное!
УдалитьНадежда Александровна, вот только к величайшему сожалению не получится сделать все баннеры одинаковыми по размерам БЕЗ искажения. Ведь если привести квадратное изображение к вытянутому, то оно растянется и получится не очень красиво... В идеале размещать баннеры в две колонки - отдельно квадратные и прямоугольные)))
Да, Лилия Павловна, Вы как всегда правы. Исправила. Действительно - квадратный гораздо лучше смотрится
УдалитьНадежда Александровна, конечно, можно и не менять, ведь самое главное, как ВАМ нравится ;)
УдалитьДобрый вечер, Лилия Павловна! Чаще всего я пользовалась первым способом. Спасибо за подсказку, обязательно воспользуюсь Вашим советом и опробую второй способ
ОтветитьУдалитьДобрый день, Светлана Анатольевна (вот ведь разница во времени как сказывается ;) )!
УдалитьЯ думаю, что можно попробовать все три способа, чтобы потом выбрать наиболее понравившийся! Рада, что статья была Вам полезна!
Добрый день, Лилия Павловна, все сделала, как у Вас в третьем способе, но картинка не отображается:-(((
ОтветитьУдалитьЗдравствуйте, Ольга Александровна!
УдалитьУдивительно, что не получается...
Попробуйте скопировать из статьи и вставить к себе в блог коды баннеров ГЕОГРАФОЧКИ и проекта для блогеров. Посмотрите, получилось или нет. Если получилось, то ищите ошибку в своём коде (часто лишний пробел или буква могу помешать), если не получилось, то, возможно, проблемы в шаблоне самого блога? Потом, конечно, не забудьте удалить ненужные попытки ;)
Лилия Павловна, так тоже пробовала, НИКАК((( И даже здесь пробовала http://www.bannerfans.com/, - аналогично(((
ОтветитьУдалитьЛилия Павловна! Спасибо! Всё получилось!!!!
ОтветитьУдалитьОльга Александровна, здравствуйте! Очень рада, что всё завершилось удачно! Признаться, и у меня бывает иногда так, что вроде бы всё правильно делаешь, а не получается... :)
УдалитьЛилия Павловна, спасибо, что пригласили! Обязательно на досуге прочитаю и изучу досконально!!!! :)
ОтветитьУдалитьЗдравствуйте, Лилия Павловна! Спасибо большое за освещение темы, как всегда Ваша помощь подоспела вовремя, закралась мысль о кнопочке блога, обратилась за советом к Ольге Александровне Папулиной и она дала ссылку на Ваш пост! Очень благодарна!!! Спасибо, что освещаете такие нужные темы! Кнопочку уже делаю)))))
ОтветитьУдалитьЗдравствуйте, Людмила Владимировна!
УдалитьОчень рада, что Вам информация пригодилась! Обязательно загляну в Ваш блог посмотреть нововведения!