Баннеры — это графические изображения, способные содержать анимированные элементы, а также являющиеся ссылками на сайт рекламодателя или страницы с дополнительной информацией.
Рассмотрим три вопроса:
Где взять изображение для баннеров.
HTML-код баннеров.
Как вставить баннер на сайт или блог.
Где взять изображение для баннеров?
Если Вы владеете программой Фотошоп, то очень просто нарисовать или сконструировать изображение для баннеров в этой программе. Как это сделать, Вы можете посмотреть в видео уроках , и в видео инструкциях.
Можно скопировать или скачать готовую картинку из Интернета. В командной строке любого поисковика набрать запрос на интересующую Вас тему и добавить слово «картинка»
Можно сделать скриншот экрана и затем отредактировать его в стандартной программе Paint net
Так же можно воспользоваться программой FSCAPTURE и вырезать необходимую часть картинки с экрана компьютера
HTML-код баннеров
Для создания баннеров, я пользуюсь своей заготовкой:
<center></center> - картинка будет располагаться по центру
<nofollow></nofollow> - ссылка будет закрыта для поисковика Гугл
<noindex></noindex> - ссылка будет закрыта для поисковика Яндекс
<a href="адрес сайта"></a> - тег адреса ссылки
Расшифровку HTML-тегов Вы можете подробно изучить в справочнике по HTML и в Таблице основных тегов HTML
Теперь рассмотрим «внутренности» кода нашего баннера:
target=_blank – страница ссылки откроется в новой вкладке
<img src="адрес картинки" – прямая ссылка на картинку
border="0" – картинка в окантовке (изменив цифру 0, поменяется ширина рамки)
title="Надпись при наведении" – при наведении на картинку рядом с курсором будет появляться надпись, которую Вы вставите в кавычки.
width=ширина – ширина картинки в пикселях (вместо слова ширина вставьте цифру)
height=высота – высота картинки в пикселях (вместо слова высота вставьте цифру)
</a> - закрывающий тег кода
<input type= 'text' size= '15' value= 'окошко'> - это HTML-код окошка, из которого, каждый желающий может скопировать код Вашего баннера и разместить на своем сайте или блоге.
Вместо слова «окошко» нужно вставить весь код баннера.
size= '15' – размер окошка, изменив цифру 15, Вы поменяете размер окошка.
Если у Вас нет времени и желания разбираться в HTML-кодах, можно автоматически сформировать код баннера – Здесь.
Внимание! В уроке я рассказываю, как сформировать адрес картинки на сайте Радикал, эта часть видео не актуальна для владельцев собственных сайтов, так как адреса картинок формируются на самом сайте.
Мониторинг обменников BestChange
На сайте представлено больше 100 обменников, курсы на которых обновляются каждые 5-8 секунд. Хотите выбрать самый-самый? Проще простого! На главной странице всегда представлены лучшие курсы обмена по 20-ти популярным направлениям.
Заходите, убедитесь сами — bestchange
При первом взгляде просто поразил будильник и в правом сайд баре про не бойся делать то, что не умеешь делать…. Креативно и прикольно, настоящее селфи блоггера.
Действительно, Татьяна обладает громадным жизненным опытом. Придётся учиться у неё заработку в интернет. Чувствую, она правильно делает. Надо же с чего то же начинать. Пойду запишусь на рассылку.
Андрей, большое спасибо за комментарий! С удовольствием прочла, за одно и неработающие ссылки удалила из статьи. А что касается рассылки, то она не работает, мой любимый рассыльщик «Смартреспондер» закрылся недавно, пока я только базу подписчиков сохранила, а рассылку ещё не успела возобновить.
Анатолий, чтобы картинка была активная, Вам нужно в код баннера вместо слов «адрес сайта» вставить ту ссылку, куда будет переход при клике по картинке баннера.
Здравствуйте! Очень полезная статья. Но не могу понять одной вещи. На сайте есть реферальная программа. Что и где, нужно прописать, что бы в коде баннера формировался индивидуальный код для каждого партнера?
Владислав, обычно, если на сайте есть партнерская программа, Ваша реферальная ссылка автоматически генерируется в коде баннера. Если это не так, то первая ссылка которая расположена в коде баннера обычно ссылка ведущая на этот сайт. Поищите на странице партнерской программы Вашу реферальную ссылку, скопируйте её и вставьте в код баннера.
Если я не правильно поняла Ваш вопрос и мой ответ Вас не удовлетворил, свяжитесь со мной по skype: kapkywa631, думаю смогу Вам помочь.
Это время ни как не регулируется. Это вообще не предусмотрено. Да и не понятно что у вас за проблема?
У меня например пока курсор находиться в области баннера титл всегда показывается.
Здравствуйте, Игорь! Проверьте ссылочку на картинку, скорее всего, что то с хостингом картинок, которым Вы пользуетесь. Давайте свяжемся по скайпу и посмотрим вместе, иначе я могу только предполагать. Свои картинки для баннеров я обычно размещаю на своих сайтах, считаю Таймвеб очень надёжным хостингом, но если у Вас нет своего сайта (своего хранилища), то можно найти множество других, Радикал например, но на таких сайтах бывают сбои и т.п. Давайте свяжемся по скайпу: kapkywa631 и поговорим об этом.
А я читала, что картинку для банера лучше иметь формата 80Х31 Так что сначала стоит готовую или сжать до этих размеров, или поискать такую в интернете.
Картинку лучше поискать, ту которая Вам очень понравится, а потом уже или обрезать или уменьшить в фотошопе или в других графических редакторах. Наиболее распространенные форматы баннеров, Вы можете посмотреть здесь — https://yanevrufoto.ru/banneryi/formatyi-bannerov
Оставлю страницу в закладках. Очень сложная вещь эти коды. Я не могу понять, если картинка для банера не из интернета, а моя собственная, фото, например, какой адрес картинки указывать?
Владимир, если у Вас есть свой сайт, то загружайте её на сайт и в окошке загрузки будет адрес картинки, если сайта нет то посмотрите урок, как сформировать адрес Вашей фотографии на сайте Радикал — https://yanevrufoto.ru/photoshop-lesson/kak-sdelat-banner-onlayn, про сайт Радикал смотрите начиная с 14:28 минуты видео
Или напишите мне на почту kapkywa63@mail.ru я сделаю Вам баннер (баннеры я делаю бесплатно, но с условием, что Вы разместите мой баннер на своём сайте) —
С большим удовольствием читаю ваш блог, особенно материалы по работе с сайтами и в фотошопе. Материал изложен обстоятельно. Внес ваш сайт в мои избранные закладки. Спасибо.
Очень рада , что зашла на ваш сайт. Очень все понравилось. Баннер обязательно сделаю. Чуть позже сами увидите. главное, дочке помочь курсовые написать, а то у нее свадьба скоро. И времени в обрез. Увы!
отличный пост, особенно в части разъяснения элементов кода, а еще с удовольствием просмотрел таблицу основных тегов..
Татьяна, быть может Вы мне подскажите… Я конечно сейчас полистаю предложенную Вами таблицу, но, если не найду выход…
У меня на странице в статьях форма подписки во весь экран… не пойму в чем дело… В сайдбаре все в порядке, а вот в постах — караул…
Спасибо за отличную статью!
Денис, с формой подписки «караул», не из-за HTML-кода, это скорее всего из-за Темы, ребята стартаповцы объясняли нам по плагинам соцсетей (у меня они не корректно отображались в статьях) и они посоветовали сменить тему, что я и сделала.
Евгений, спасибо за комментарий, я действительно пишу для чайников, которым и сама являюсь пожизненно, в чем -то мы все чайники. Помню, как я начинала делать первые рамочки в HTML, знаю как это не просто с нуля начинать, поэтому и стараюсь описать все очень подробно.
Фотошоп изучал в основном методом тыка, и в крайнем случае делал пошаговые уроки. До некоторых моментов сам дошел (интуитивно). Пока не приходилось делать баннеров, но буду иметь ввиду.
Большое спасибо за такую ценную информацию! Я тоже держу в мечтах создать собственный баннер, а тут такое готовое разъяснение , как это сделать. Отлично, а главное, очень доступно и понятно!
Рекламные Баннеры несомненно полезная и незаменимая вещь в интернет бизнесе, а умение их создавать — это целая наука, спасибо за подробное описание, уверен, пригодиться многим, не только начинающим интернет предпринимателям!
Татьяна, супер! Ваш сайт для меня просто находка — кладезь полезной информации. Обязательно вернусь к Вам и подпишусь еще.
Спасибо Вам, Татьяна!
Удачи и Успехов!
упс, уже нашел ответ на вашем сайте, сейчас нет времени смотреть как создать анимированый банер, поэтому кинул страницу со статьей в закладки, изучу этот урок когда немного освободится время.
Еще раз спасибо)
Ого, очень полезная и необходимая мне информация, я думал что это довольно сложно, а оказывается все настолько просто. Большое спасибо за статью, темный и дремучий лес HTML кодов стал для меня немного светлее и приветливей)))
И если позволите вопрос, а как сделать баннер в движении, я правильно понимаю, что для этого просто берется изображение с gif расширением?
Да, Владимир, из моих уроков Вы узнаете, как самому сделать изображение gif в Фотошопе, а можно любую анимашку (gif) найти в интернет, прямо в поисковике набрать анимационные или анимированные картинки. Спасибо за комментарий!
41 комментарий
Перейти полю для комментария
При первом взгляде просто поразил будильник и в правом сайд баре про не бойся делать то, что не умеешь делать…. Креативно и прикольно, настоящее селфи блоггера.
Действительно, Татьяна обладает громадным жизненным опытом. Придётся учиться у неё заработку в интернет. Чувствую, она правильно делает. Надо же с чего то же начинать. Пойду запишусь на рассылку.
Автор
Андрей, большое спасибо за комментарий! С удовольствием прочла, за одно и неработающие ссылки удалила из статьи. А что касается рассылки, то она не работает, мой любимый рассыльщик «Смартреспондер» закрылся недавно, пока я только базу подписчиков сохранила, а рассылку ещё не успела возобновить.
Татьяна, использовал ваш код баннера. Картинка на сайте появляется, но она не активная.
Автор
Анатолий, чтобы картинка была активная, Вам нужно в код баннера вместо слов «адрес сайта» вставить ту ссылку, куда будет переход при клике по картинке баннера.
Мне так нужен был такой полезный Сайт как Ваш ! Спасибо за всё !
Здравствуйте! Очень полезная статья. Но не могу понять одной вещи. На сайте есть реферальная программа. Что и где, нужно прописать, что бы в коде баннера формировался индивидуальный код для каждого партнера?
Автор
Владислав, обычно, если на сайте есть партнерская программа, Ваша реферальная ссылка автоматически генерируется в коде баннера. Если это не так, то первая ссылка которая расположена в коде баннера обычно ссылка ведущая на этот сайт. Поищите на странице партнерской программы Вашу реферальную ссылку, скопируйте её и вставьте в код баннера.
Если я не правильно поняла Ваш вопрос и мой ответ Вас не удовлетворил, свяжитесь со мной по skype: kapkywa631, думаю смогу Вам помочь.
Спасибо за эту информацию по баннерам. У меня следующий вопрос. Как увеличить время экспозиции текста, выводимого при наведении курсора? Движок DLE.
Автор
Даниил, спасибо за комментарий, но к сожалению я не знаю ответа на Ваш вопрос.
Это время ни как не регулируется. Это вообще не предусмотрено. Да и не понятно что у вас за проблема?
У меня например пока курсор находиться в области баннера титл всегда показывается.
Здравствуйте! Небольшой вопросик, если Вас не затруднит. Почему, когда устанавливаю баннер не вырисовывается картинка. Баннер работает.
Автор
Здравствуйте, Игорь! Проверьте ссылочку на картинку, скорее всего, что то с хостингом картинок, которым Вы пользуетесь. Давайте свяжемся по скайпу и посмотрим вместе, иначе я могу только предполагать. Свои картинки для баннеров я обычно размещаю на своих сайтах, считаю Таймвеб очень надёжным хостингом, но если у Вас нет своего сайта (своего хранилища), то можно найти множество других, Радикал например, но на таких сайтах бывают сбои и т.п. Давайте свяжемся по скайпу: kapkywa631 и поговорим об этом.
Интересная статья. Вас всегда приятно почитать!:) Успехов!
А я читала, что картинку для банера лучше иметь формата 80Х31 Так что сначала стоит готовую или сжать до этих размеров, или поискать такую в интернете.
Автор
Картинку лучше поискать, ту которая Вам очень понравится, а потом уже или обрезать или уменьшить в фотошопе или в других графических редакторах. Наиболее распространенные форматы баннеров, Вы можете посмотреть здесь —https://yanevrufoto.ru/banneryi/formatyi-bannerov
Оставлю страницу в закладках. Очень сложная вещь эти коды. Я не могу понять, если картинка для банера не из интернета, а моя собственная, фото, например, какой адрес картинки указывать?
Автор
Владимир, если у Вас есть свой сайт, то загружайте её на сайт и в окошке загрузки будет адрес картинки, если сайта нет то посмотрите урок, как сформировать адрес Вашей фотографии на сайте Радикал —https://yanevrufoto.ru/photoshop-lesson/kak-sdelat-banner-onlayn , про сайт Радикал смотрите начиная с 14:28 минуты видео
Автор
Или напишите мне на почту kapkywa63@mail.ru я сделаю Вам баннер (баннеры я делаю бесплатно, но с условием, что Вы разместите мой баннер на своём сайте) —
Очень нужная для меня инфа. Опубликовал в Контакте.
Спасибо!
Автор
Спасибо Сергей, за посещение и пиар сайта! Удачи Вам во всех начинаниях!
Спасибо, у меня есть блог, воспользуюсь Вашим уроком и попробую сделать самостоятельно баннер.
Таня, какая Вы молодец!
Хорошо так все расписали. И все сложное стало простым.
Очень полезная информация, буду заходить. Если найдете время заходите, буду рад.
Оказывается все не очень сложно. А я уже думала заказывать у фрилансеров.
С большим удовольствием читаю ваш блог, особенно материалы по работе с сайтами и в фотошопе. Материал изложен обстоятельно. Внес ваш сайт в мои избранные закладки. Спасибо.
Добавлю инструкцию в закладки, у меня с html всегда было плохо.
Очень рада , что зашла на ваш сайт. Очень все понравилось. Баннер обязательно сделаю. Чуть позже сами увидите. главное, дочке помочь курсовые написать, а то у нее свадьба скоро. И времени в обрез. Увы!
отличный пост, особенно в части разъяснения элементов кода, а еще с удовольствием просмотрел таблицу основных тегов..
Татьяна, быть может Вы мне подскажите… Я конечно сейчас полистаю предложенную Вами таблицу, но, если не найду выход…
У меня на странице в статьях форма подписки во весь экран… не пойму в чем дело… В сайдбаре все в порядке, а вот в постах — караул…
Спасибо за отличную статью!
Автор
Денис, с формой подписки «караул», не из-за HTML-кода, это скорее всего из-за Темы, ребята стартаповцы объясняли нам по плагинам соцсетей (у меня они не корректно отображались в статьях) и они посоветовали сменить тему, что я и сделала.
Татяна, всё расжёванно так, что каждый чайник поймёт, Спасибо.
Автор
Евгений, спасибо за комментарий, я действительно пишу для чайников, которым и сама являюсь пожизненно, в чем -то мы все чайники. Помню, как я начинала делать первые рамочки в HTML, знаю как это не просто с нуля начинать, поэтому и стараюсь описать все очень подробно.
Фотошоп изучал в основном методом тыка, и в крайнем случае делал пошаговые уроки. До некоторых моментов сам дошел (интуитивно). Пока не приходилось делать баннеров, но буду иметь ввиду.
Если честно, то боюсь Фотошоп:)) Но, думаю, что благодаря вашим урокам этот страх исчезнет
Большое спасибо за такую ценную информацию! Я тоже держу в мечтах создать собственный баннер, а тут такое готовое разъяснение , как это сделать. Отлично, а главное, очень доступно и понятно!
Рекламные Баннеры несомненно полезная и незаменимая вещь в интернет бизнесе, а умение их создавать — это целая наука, спасибо за подробное описание, уверен, пригодиться многим, не только начинающим интернет предпринимателям!
Татьяна, супер! Ваш сайт для меня просто находка — кладезь полезной информации. Обязательно вернусь к Вам и подпишусь еще.
Спасибо Вам, Татьяна!
Удачи и Успехов!
Татьяна, я почему-то не могу подписаться на Вашу рассылку, пишет что некорректный синтаксис e-mail адреса
Интересная статья, и как раз вовремя для меня. Спасибо.
упс, уже нашел ответ на вашем сайте, сейчас нет времени смотреть как создать анимированый банер, поэтому кинул страницу со статьей в закладки, изучу этот урок когда немного освободится время.
Еще раз спасибо)
Ого, очень полезная и необходимая мне информация, я думал что это довольно сложно, а оказывается все настолько просто. Большое спасибо за статью, темный и дремучий лес HTML кодов стал для меня немного светлее и приветливей)))
И если позволите вопрос, а как сделать баннер в движении, я правильно понимаю, что для этого просто берется изображение с gif расширением?
Автор
Да, Владимир, из моих уроков Вы узнаете, как самому сделать изображение gif в Фотошопе, а можно любую анимашку (gif) найти в интернет, прямо в поисковике набрать анимационные или анимированные картинки. Спасибо за комментарий!