Как сделать баннер для сайта?

Иметь свой баннер не только престижно, но также позволяет эффективно рекламировать свой сайт на других ресурсах и привлекать посетителей.

как сделать баннер для сайта

Свои баннеры есть, как правило, на раскрученных и популярных сайтах, а для многих начинающих блоггеров это удовольствие не всегда доступно.

Еще бы, ведь для создания своего баннера надо обладать, как минимум, знаниями html-программирования и иметь навыки веб-дизайна.

Как вы думаете, можно ли сделать баннер для сайта, не обладая всеми этими знаниями? Оказывается можно!

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

Далее, надо найти картинку для баннера, подогнать её по размеру вашего сайдбара или другого места, где вы хотите его использовать. Потом закачать файл с картинкой. Как это сделать я уже рассказывал здесь.

После этого, берем исходный код баннера и внимательно смотрим, где в нем прописан путь к картинке. Чтобы не усложнять задачу, я покажу Вам уже готовый код от моего баннера и расскажу, на что следует обратить внимание.

Вот этот код: синим цветом в нем выделены места вставки моих данных для баннера, а остальную часть кода Вы можете использовать, как шаблон.

===================================================

<center> <a href=”http://bit.ly/rcQno9“> <target=”_blank”><img src=”http://мой сайт.ru/wp-content/Banner/Pohudet-zа-12-nedel.jpgalt=” width=”155″ height=”260″ /></a> </center>

<p style=”text-align: center;”><span style=”text-decoration: underline; color: #ff0000;”><strong><a href=http://bit.ly/rcQno9><span style=”text-decoration: underline; color: #ff0000;”> “Авторский курс «Похудеть за 12 недель»”</span></a></strong></span></p>

 ===================================================

Давайте рассмотрим подробнее каждую вставку в код баннера.

1. http://bit.ly/rcQno9 – здесь надо вставить ссылку на ваш сайт или партнерскую ссылку, если хотите сделать баннер для партнерской программы.

2. http://мой сайт.ru/wp-content/Banner/rezepty.jpg – здесь указан путь к вашей картинке. У меня она называется rezepty.jpg (это транслитерация названия «рецепты»). Обращаю ваше внимание, что наименование файла картинки надо делать буквами латинского алфавита.

3. Ниже мы опять указываем ссылку на свой сайт или партнерскую ссылку, которая будет содержаться в надписи под баннером.

4. Пишем текст, который будет находиться под баннером и содержать ссылку на ваш сайт. В моей надписи текст сделан красным цветом, код цвета – #ff3433. Если хотите сделать синим, поменяйте на этот код – #3300ff .

А теперь посмотрим, что получилось:

лечение народными средствами, картинки здорового образа жизни, здоровая жизнь

Скачать книгу

Можете проверить и картинка и надпись под ней – кликабельные.

А вот еще один пример баннера для моего блога. Правда здесь пригодился небольшой опыт работы моего сына – Антона в программе Photoshop , чтобы сделать двигающуюся надпись в картинке. В остальном все точно так же, как описано выше (за исключением надписи под баннером).

 width=

Код баннера:

====================================================

<center> <a href=”https://mojzhozh.ru”> <target=”_blank”><img src=”https://mojzhozh.ru/wp-content/Banner/mojzhozh.gif” alt=” width=”171″ height=”60″ /></a> </center>

====================================================

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

И, как всегда в конце, подобрал для вас небольшое видео, в котором наглядно показано, как сделать баннер в фотошоп: