«

»

Май 22

Баннеры

Баннеры

БаннерыБаннеры — это графические изображения, способные содержать анимированные элементы, а также являющиеся ссылками на сайт рекламодателя или страницы с дополнительной информацией.

Рассмотрим три вопроса:

 

  • Где взять изображение для баннеров.

  • HTML-код баннеров.

  • Как вставить баннер на сайт или блог.

Где взять изображение для баннеров?

  •      Если Вы владеете программой Фотошоп, то очень просто нарисовать или сконструировать изображение для баннеров в этой программе. Как это сделать, Вы можете посмотреть в видео уроках ,  и в видео инструкциях.

  •      Можно скопировать или скачать готовую картинку из Интернета. В командной строке любого поисковика набрать запрос на интересующую Вас тему и добавить слово «картинка»

  •      Можно сделать скриншот экрана и затем отредактировать его в стандартной программе Paint net

  •      Так же можно воспользоваться программой FSCAPTURE и вырезать необходимую часть картинки с экрана компьютера

HTML-код баннеров

     Для создания баннеров, я пользуюсь своей заготовкой:

Это код самого баннера:

<center><nofollow><noindex><a href="адрес сайта" target=_blank><img src="адрес картинки" border="0" title="Надпись при наведении" width=ширина height=высота></a></noindex></nofollow></center>

 

     А это код окошка из которого, каждый желающий может скопировать код Вашего баннера и разместить на своем сайте или блоге.

 

<center><nofollow><noindex><input type= 'text' size= '15' value= 'окошко'></noindex></nofollow></center>

 

Рассмотрим подробно действие каждого тега

 

(тег- 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-кодах, можно автоматически сформировать  код баннера – Здесь.

 

Как вставить баннер на сайт или блог?

Посмотрите видео уроки:

1. Как вставить баннер на сайт

 

Внимание!  В уроке я рассказываю, как сформировать адрес картинки на сайте Радикал,  эта часть видео не актуальна для владельцев собственных сайтов, так как адреса картинок формируются на самом сайте.

2. Как вставить баннер на блог Mail.ru

 

Баннеры

 

 

У Вас возникли вопросы? Свяжитесь со мной сейчас!

Мой статус
Загрузи Skype и звони мне бесплатно.

 

 

Что нужно фрилансеру и веб-мастеру для счастья? Успеть обменять кровно заработанные электронные деньги прямо сейчас и по самому выгодному курсу. Что для этого нужно сделать? Сидеть и ждать когда у «любимого» монополиста появится привлекательное предложение на вашу валюту? Ответ не верный. Достаточно просто зайти на BestChange и сделать это по-быстрому. Да-да. Можно за несколько секунд обменять электронные деньги быстро, безопасно и с минимальными потерями для кошелька.
На сайте представлено больше 100 обменников, курсы на которых обновляются каждые 5-8 секунд. Хотите выбрать самый-самый? Проще простого! На главной странице всегда представлены лучшие курсы обмена по 20-ти популярным направлениям.
Заходите, убедитесь сами — bestchange

 

 

 

рассказать друзьям и получить подарок

41 комментарий

Перейти полю для комментария

  1. Андрей

    При первом взгляде просто поразил будильник и в правом сайд баре про не бойся делать то, что не умеешь делать…. Креативно и прикольно, настоящее селфи блоггера.

    Действительно, Татьяна обладает громадным жизненным опытом. Придётся учиться у неё заработку в интернет. Чувствую, она правильно делает. Надо же с чего то же начинать. Пойду запишусь на рассылку.

    1. admin Татьяна Жмуренко (Егорова)

      Андрей, большое спасибо за комментарий! С удовольствием прочла, за одно и неработающие ссылки удалила из статьи. А что касается рассылки, то она не работает, мой любимый рассыльщик «Смартреспондер» закрылся недавно, пока я только базу подписчиков сохранила, а рассылку ещё не успела возобновить.

  2. Анатолий

    Татьяна, использовал ваш код баннера. Картинка на сайте появляется, но она не активная.

    1. admin Татьяна Жмуренко (Егорова)

      Анатолий, чтобы картинка была активная, Вам нужно в код баннера вместо слов «адрес сайта» вставить ту ссылку, куда будет переход при клике по картинке баннера.

  3. ТФИСИЯ

    Мне так нужен был такой полезный Сайт как Ваш ! Спасибо за всё !

  4. Владислав

    Здравствуйте! Очень полезная статья. Но не могу понять одной вещи. На сайте есть реферальная программа. Что и где, нужно прописать, что бы в коде баннера формировался индивидуальный код для каждого партнера?

    1. admin Татьяна Жмуренко (Егорова)

      Владислав, обычно, если на сайте есть партнерская программа, Ваша реферальная ссылка автоматически генерируется в коде баннера. Если это не так, то первая ссылка которая расположена в коде баннера обычно ссылка ведущая на этот сайт. Поищите на странице партнерской программы Вашу реферальную ссылку, скопируйте её и вставьте в код баннера.
      Если я не правильно поняла Ваш вопрос и мой ответ Вас не удовлетворил, свяжитесь со мной по skype: kapkywa631, думаю смогу Вам помочь.

  5. Даниил

    Спасибо за эту информацию по баннерам. У меня следующий вопрос. Как увеличить время экспозиции текста, выводимого при наведении курсора? Движок DLE.

    1. admin Татьяна Жмуренко (Егорова)

      Даниил, спасибо за комментарий, но к сожалению я не знаю ответа на Ваш вопрос.

    2. Дмитрий

      Это время ни как не регулируется. Это вообще не предусмотрено. Да и не понятно что у вас за проблема?
      У меня например пока курсор находиться в области баннера титл всегда показывается.

  6. Игорь

    Здравствуйте! Небольшой вопросик, если Вас не затруднит. Почему, когда устанавливаю баннер не вырисовывается картинка. Баннер работает.

    1. admin Татьяна Жмуренко (Егорова)

      Здравствуйте, Игорь! Проверьте ссылочку на картинку, скорее всего, что то с хостингом картинок, которым Вы пользуетесь. Давайте свяжемся по скайпу и посмотрим вместе, иначе я могу только предполагать. Свои картинки для баннеров я обычно размещаю на своих сайтах, считаю Таймвеб очень надёжным хостингом, но если у Вас нет своего сайта (своего хранилища), то можно найти множество других, Радикал например, но на таких сайтах бывают сбои и т.п. Давайте свяжемся по скайпу: kapkywa631 и поговорим об этом.

  7. Oksana Marchuk

    Интересная статья. Вас всегда приятно почитать!:) Успехов!

  8. Анна

    А я читала, что картинку для банера лучше иметь формата 80Х31 Так что сначала стоит готовую или сжать до этих размеров, или поискать такую в интернете.

    1. admin Татьяна Жмуренко (Егорова)

      Картинку лучше поискать, ту которая Вам очень понравится, а потом уже или обрезать или уменьшить в фотошопе или в других графических редакторах. Наиболее распространенные форматы баннеров, Вы можете посмотреть здесь — http://yanevrufoto.ru/banneryi/formatyi-bannerov

  9. Владимир

    Оставлю страницу в закладках. Очень сложная вещь эти коды. Я не могу понять, если картинка для банера не из интернета, а моя собственная, фото, например, какой адрес картинки указывать?

    1. admin Татьяна Жмуренко (Егорова)

      Владимир, если у Вас есть свой сайт, то загружайте её на сайт и в окошке загрузки будет адрес картинки, если сайта нет то посмотрите урок, как сформировать адрес Вашей фотографии на сайте Радикал — http://yanevrufoto.ru/photoshop-lesson/kak-sdelat-banner-onlayn, про сайт Радикал смотрите начиная с 14:28 минуты видео

    2. admin Татьяна Жмуренко (Егорова)

      Или напишите мне на почту kapkywa63@mail.ru я сделаю Вам баннер (баннеры я делаю бесплатно, но с условием, что Вы разместите мой баннер на своём сайте) — http://yanevrufoto.ru/stranichka_zakazov

  10. Сергей Воронов

    Очень нужная для меня инфа. Опубликовал в Контакте.
    Спасибо!

    1. admin Татьяна Жмуренко (Егорова)

      Спасибо Сергей, за посещение и пиар сайта! Удачи Вам во всех начинаниях!

  11. Эльвира

    Спасибо, у меня есть блог, воспользуюсь Вашим уроком и попробую сделать самостоятельно баннер.

  12. Наталия Турукина

    Таня, какая Вы молодец!
    Хорошо так все расписали. И все сложное стало простым.

  13. Николай

    Очень полезная информация, буду заходить. Если найдете время заходите, буду рад.

  14. Наталья

    Оказывается все не очень сложно. А я уже думала заказывать у фрилансеров.

  15. Игорь

    С большим удовольствием читаю ваш блог, особенно материалы по работе с сайтами и в фотошопе. Материал изложен обстоятельно. Внес ваш сайт в мои избранные закладки. Спасибо.

  16. letoblun

    Добавлю инструкцию в закладки, у меня с html всегда было плохо.

  17. Светлана

    Очень рада , что зашла на ваш сайт. Очень все понравилось. Баннер обязательно сделаю. Чуть позже сами увидите. главное, дочке помочь курсовые написать, а то у нее свадьба скоро. И времени в обрез. Увы!

  18. Денис

    отличный пост, особенно в части разъяснения элементов кода, а еще с удовольствием просмотрел таблицу основных тегов..
    Татьяна, быть может Вы мне подскажите… Я конечно сейчас полистаю предложенную Вами таблицу, но, если не найду выход…
    У меня на странице в статьях форма подписки во весь экран… не пойму в чем дело… В сайдбаре все в порядке, а вот в постах — караул…
    Спасибо за отличную статью!

    1. admin Татьяна Жмуренко (Егорова)

      Денис, с формой подписки «караул», не из-за HTML-кода, это скорее всего из-за Темы, ребята стартаповцы объясняли нам по плагинам соцсетей (у меня они не корректно отображались в статьях) и они посоветовали сменить тему, что я и сделала.

  19. Evgeny

    Татяна, всё расжёванно так, что каждый чайник поймёт, Спасибо.

    1. admin Татьяна Жмуренко (Егорова)

      Евгений, спасибо за комментарий, я действительно пишу для чайников, которым и сама являюсь пожизненно, в чем -то мы все чайники. Помню, как я начинала делать первые рамочки в HTML, знаю как это не просто с нуля начинать, поэтому и стараюсь описать все очень подробно.

  20. Руслан

    Фотошоп изучал в основном методом тыка, и в крайнем случае делал пошаговые уроки. До некоторых моментов сам дошел (интуитивно). Пока не приходилось делать баннеров, но буду иметь ввиду.

  21. Евгения Шевцова

    Если честно, то боюсь Фотошоп:)) Но, думаю, что благодаря вашим урокам этот страх исчезнет

  22. Наталья

    Большое спасибо за такую ценную информацию! Я тоже держу в мечтах создать собственный баннер, а тут такое готовое разъяснение , как это сделать. Отлично, а главное, очень доступно и понятно!

  23. Алексей

    Рекламные Баннеры несомненно полезная и незаменимая вещь в интернет бизнесе, а умение их создавать — это целая наука, спасибо за подробное описание, уверен, пригодиться многим, не только начинающим интернет предпринимателям!

  24. Ольга

    Татьяна, супер! Ваш сайт для меня просто находка — кладезь полезной информации. Обязательно вернусь к Вам и подпишусь еще.
    Спасибо Вам, Татьяна!
    Удачи и Успехов!

    1. Ольга

      Татьяна, я почему-то не могу подписаться на Вашу рассылку, пишет что некорректный синтаксис e-mail адреса

  25. Сергей

    Интересная статья, и как раз вовремя для меня. Спасибо.

  26. Владимир

    упс, уже нашел ответ на вашем сайте, сейчас нет времени смотреть как создать анимированый банер, поэтому кинул страницу со статьей в закладки, изучу этот урок когда немного освободится время.
    Еще раз спасибо)

  27. Владимир

    Ого, очень полезная и необходимая мне информация, я думал что это довольно сложно, а оказывается все настолько просто. Большое спасибо за статью, темный и дремучий лес HTML кодов стал для меня немного светлее и приветливей)))
    И если позволите вопрос, а как сделать баннер в движении, я правильно понимаю, что для этого просто берется изображение с gif расширением?

    1. admin Татьяна Жмуренко (Егорова)

      Да, Владимир, из моих уроков Вы узнаете, как самому сделать изображение gif в Фотошопе, а можно любую анимашку (gif) найти в интернет, прямо в поисковике набрать анимационные или анимированные картинки. Спасибо за комментарий!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>