Желаемый Образ Жизни

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

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

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

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

Еще бы, ведь для создания своего баннера надо обладать, как минимум, знаниями 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=”http://mojzhozh.ru”> <target=”_blank”><img src=”http://mojzhozh.ru/wp-content/Banner/mojzhozh.gif” alt=” width=”171″ height=”60″ /></a> </center>

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

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

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

Понравилась статья? Нажмите на кнопки - поделитесь с друзьями:

Доброго Вам здоровья и счастья! С уважением, Сергей Родник

 
Статьи похожей тематики:

Уважаемый читатель!

Буду признателен Вам за обратную связь по статье. Высказать свое мнение или задать вопрос Вы можете в форме "ВКонтакте" или в форме для обратной связи -внизу под комментариями

Отзывов 20

  1. Какая отличная идея, свой баннер для сайта. Попробую сделать. Большое спасибо за совет

  2. Прочитал с интересом. Спасибо.

  3. Для меня сейчас очень полезная информация! Спасибо!

  4. Спасибо за науку!

  5. Большое спасибо за статью! Желаю творческих успехов!

  6. Поставила этот материал в закладки! Очень востребованная информация!

  7. Сергей! Спасибо за статью! Приму на вооружение.

  8. Спасибо! Интересная информация. Взяла в Закладки

  9. Благодарю за полезную информацию!

  10. Хм. А нарисовать баннеры могу помочь я

  11. Интересно. надо попробовать. В блогах делают баннеры чаще через радикал

  12. И я решила попробовать! Спасибо за инструкцию.

  13. Пожалуйста!

  14. А мне эта статья понравилась. Есть что почерпнуть интересное. Спасибо.

  15. Доброго времени суток!!! У вас замечательная статья, все написано и описано доступно, но мне так нужен свой баннер, что я вчера вечером все сделала так как вы описали, но решив протестировать его на своем сайте, обнаружила к большому сожалению, что у меня не отображается картинка)))Вы не могли бы мне сказать в чем может быть такая проблема?Картинку для баннера я 2 раза уменьшала, а так хочется научиться самой этаким примудростям), я вам буду очень благодарна если вы ответите))!!!

  16. Здравствуйте, Екатерина!
    Здесь может быть 2 причины:
    1) Вы не загрузили картинку на хостинг (как это сделать рассказано здесь)
    2) Не правильно указан путь к картинке или название файла с картинкой.

    Если Вы заметили, я в папке wp-content создал папку Banner и поместил файл с картинкой в неё. Посмотрите, где у Вас находится картинка?

  17. Спасибо большое! Баннеры давно готовы, но я не знала, как прописать код, а тут Ваша очень полезная статья. Еще раз спасибо. Только у меня почему-то при обновлении записи, куда вставляю код баннера, теряется вторая часть кода. Что я не правильно делаю? А баннер ведет на правильную страницу.

  18. Ирина, пожалуйста! К сожалению, не увидев Ваш код баннера, я не могу сказать, что неправильно делается.

  19. Здравсвтуйте Сергей. Всё очень интересно! Скажите, а как сделать такую же страничку: http://mojzhozh.ru/rezepty, но что бы как и у вас она отличалась от основного сайта, то есть на не было меню и рекламы. Спасибо.

  20. Здравствуйте, Игорь! Если кратко – эту страничку надо сверстать в html-коде, а потом закачать на хостинг в отдельную папку. Я так сделал.

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

*