Как разместить баннер на сайте? Как на своем сайте разместить баннер


Как разместить баннер на сайте за 2 минуты

 Всем привет, друзья!У многих начинающих вебмастеров часто возникает такой вопрос: «А как разместить баннер на сайте?» Например, я уже разместил не один banner на своих сайтах, поэтому с удовольствием расскажу вам, как это сделать. Кроме этого вы узнаете, на каких проектах можно размещать баннеры, а на каких нет, и как правильно это делать, чтобы не навредить своему ресурсу.

Перед тем как размещать баннер, его конечно нужно создать. Чтобы это сделать, вы можете прочитать 2 статьи на моем блоге: «Как сделать gif баннер?» и «Как сделать угловой баннер?» Ну а если вы решили разместить баннер на сайт рекламодателей, то он должен сам его предоставить, и делать вам ничего не нужно.

Итак, прежде чем перейти к размещению баннера, нужно сказать следующее:

1) Не размещайте баннеры на сайте, если ему не исполнилось еще и полгода или на нем нет 300 посетителей в сутки. Многие новички после создания сайта сразу же обвешивают его баннерами со всех сторон. Это очень неверный шаг, не делайте так никогда.

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

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

Теперь что касается посещаемости. Я не понимаю тех людей, которые вешают рекламу на блоге с посещаемостью 10 уникальных посетителей в сутки. Вот у меня сейчас примерная посещаемость 250 уников в сутки, но я рекламу еще не размещаю. Зачем это делать? Много денег я и так не заработаю, а вот навредить эти баннеры могут прилично.

2) Не размещайте баннеры с яркими цветами, которые режут глаза. Вам нравиться смотреть на этот banner :smile:?

Мне, например, нет, и думаю, вашим посетителям также не понравится. Так вот, чем больше у вас будет таких навязчивых баннеров, тем хуже. Сейчас очень большую роль в продвижении сайта играют поведенческие факторы. Это то, как ведет себя посетитель на сайте (сколько времени находиться, сколько страниц просматривает за одно посещения, и т. д.) И если вы обвешаете свой ресурс такими баннерами, то думаю, долго оставаться на вашем ресурсе люди не будут.

Когда вы разместите banner на своем блоге, начните читать свою статью, и ответьте себе на такие вопросы: «Мне удобно читать?» «Меня ничего не раздражает?» Если не раздражает, то все замечательно, так и должно быть.

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

3) Размещайте только тематические баннеры. Я часто захожу на развлекательные блоги и вижу там баннеры о продвижении сайтов с партнерской ссылкой :smile:. Ну, кто будет на него кликать? Кому он нужен? Да, возможно у школьника также есть свой ресурс, но все равно, нетематические баннеры размещать на сайте бесполезно и толку от них никакого не будет.

Конечно, если вам заплатили за этот banner деньги, и рекламодатель сам решил разместить рекламу на нетематическом сайте, то тогда, пожалуйста, если баннер не режет глаза, можете размещать.

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

Припустим, вы создали примерно такой banner:

Как видите, это обычная картинка, ее нужно загрузить на хостинг, я загрузил по такому адресу:

http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/banner.png

Мне нужно еще сделать так, чтобы этот баннер вел на такую страницу:

http://site.ru/

Теперь я делаю код баннера, выглядит он у меня следующим образом:

<a target="_blank" rel="nofollow" href="http://site.ru/"> <img alt="здесь ваш текст" src="http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/banner.png" />

Сейчас давайте разберем этот код подробно, чтобы было понятно, что здесь за что отвечает.

  • rel="nofollow" — этот атрибут нужен для того, чтобы закрыть ссылку на внешний сайт от индексации. Обязательно вставляйте этот атрибут и закрывайте ненужные ссылки от индексации, они могут только навредить в продвижении, особенно если это сквозные линки где-нибудь в сайдбаре;
  • target="_blank" — атрибут предназначен для того, чтобы ссылка на баннер открывалась в новом окне. Лучше его оставить, чтобы не терять посетителей со своего сайта и тем самим улучшать поведенческие факторы;
  • http://site.ru/ — ну, здесь все понятно, это ссылка на сайт. Эту ссылку даст вам рекламодатель, если вы размещаете рекламный banner. Или это будет ваша партнерская ссылка;
  • Alt – тег alt нужно указывать возле картинки всегда, чтобы не было ошибок валидации;
  • http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/banner.png — адрес на хостинге, куда я загрузил баннер. Вы указываете свой адрес. Более того, если ввести этот адрес в браузере, то вы должны увидеть там banner. Если будет выдаваться 404 ошибка, значит, вы указали путь к баннеру неверно;
  • width="240" и — ширина и высота баннера, лучше также указывать, это ускорит загрузку баннера с хостинга.

Вы можете просто скопировать этот код и заменить в нем некоторые вещи:

  1. Ссылку на сайт, куда должен вести banner. Вместо http://site.ru/ указываете свою;
  2. Адрес на хостинге, откуда нужно загружать баннер. Вместо http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/banner.png указываете свой;
  3. Тег Alt пропишите свой и укажите ширина и высота своего баннера.

Следующая задача – это разместить рекламный баннер на сайте. Здесь сложно дать конкретные рекомендации, так как мне неизвестно какой у вас движок. Но сейчас для примера я покажу, как разместить баннер на сайте wordpress в сайтбаре.

Для этого захожу в «панель управление» – «дизайн» – «виджеты» и просто вставляю свой код баннера в виджет.

На блоге banner у меня выглядит следующим образом:

Кроме этого, если у вас сайт сделан на движке wordpress, то вы можете еще открыть файл header.php, sidebar.php или single.php и вставить код баннера в любой из этих файлов в то место, где вы хотите, чтобы он выводились.

Если нужно выровнять banner по центру, то для этого подойдет тег «center». Код баннера будет выглядеть так:

<center><a target="_blank" rel="nofollow" href="http://site.ru/"> <img alt="здесь ваш текст" src="http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/banner.png" /></center>

Если banner прилипает внизу к какому-то элементу, то можно сделать отступ снизу на несколько пикселей. Для примера сделаю отступ на 10 px. Код баннера будет таким:

<div><a target="_blank" rel="nofollow" href="http://site.ru/"> <img alt="здесь ваш текст" src="http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/banner.png" /></div>

Если баннер сверху прилипает, то можно также сделать отступ сверху на несколько пикселей. Пусть будет также на 10:

<div><a target="_blank" rel="nofollow" href="http://site.ru/"> <img alt="здесь ваш текст" src="http://vachevskiy.ru/wp-content/themes/BusinessBlog/images/banner.png" /></div>

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

На этом здесь все. Теперь думаю понятно, как разместить баннер на сайте бесплатно. Всем пока!

vachevskiy.ru

Как разместить баннер на сайте

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

Что такое баннер и зачем он нужен.

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

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

Перед размещением баннерной рекламы необходимо соблюдать ряд рекомендаций:

  1. Не желательно размещать баннер на молодом сайте с посещаемостью меньше 300 человек в день. Поисковые системы отрицательно относятся к молодым сайтам с большим количеством рекламы. Они воспринимают его как проект, созданный исключительно для заработка, а не для людей.  Поисковики накладывают разного рода санкции на такой ресурс и понижают его в выдаче. Какой смысл размещать рекламу, на сайте с посещаемостью несколько десятков человек в сутки? Отдачи от такой рекламы не будет, а навредить своему ресурсу можно.
  2. Не надо делать и устанавливать блоки в ярких, ядовитых цветах. Такие изображения раздражают пользователей, уменьшают количество переходов по рекламе и общее время нахождения на сайте. Что, как вы понимаете, резко ухудшает поведенческие факторы и доход с баннерной рекламы. Старайтесь выбирать четкие, информативные, понятные изображения с цветами подходящими под общий дизайн вашего ресурса.
  3. Желательно, чтобы баннер соответствовал тематике вашего ресурса. Согласитесь, смешно смотрится реклама ремонта автомобилей, на сайте посвященному кулинарии! Да и какой смысл переходить посетителю кулинарного сайта по данному баннеру, если его интересуют исключительно кулинарные рецепты.

Виды и способы вставки баннеров.

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

Основные размеры баннеров

Также баннеры можно разделить на статические (графические) и на динамичные (анимированные).

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

Посмотрите как он выглядит.

Анимированный  содержит подвижную картинку с применением flash технологии. Обычно, установка таких баннеров, не составляет проблем и заключается в размещении простого кода в нужном месте сайта.  Иногда, бывает необходимо, чтобы в одном месте показывалось несколько баннеров, которые циклически меняются между собой. Для создания такой демонстрации применяются специальные скрипты, которые называются ротаторами (“крутилками”) баннеров, они позволяют показывать разные изображения в определенном порядке.

Подготовка кода баннера.

Основные места установки рекламных блоков, это сайдбар и непосредственно в тексте статьи.  Иногда устанавливают в шапку сайта или в подвале.

Для этого понадобится простейший код.

<a target="_blank" rel="nofollow" href=http://ваша ссылка на рекламируемый сайт/> <img alt="здесь ваш текст" src="https://путь к картинке" />

<a target="_blank" rel="nofollow" href=http://ваша ссылка на рекламируемый сайт/>

<img alt="здесь ваш текст" src="http://путь к картинке" />

Давайте разберем что здесь и зачем:

  • target=”_blank” – атрибут указывающий на открытие ссылки ведущей с баннера в новом окне. Посетитель переходя по данной ссылке, не покидает ваш сайт навсегда, что положительно влияет на поведенческие факторы;
  • rel=”nofollow” – атрибут для закрытия ссылки от индексации поисковиками. Помогает защитить ваш сайт от перераспределения веса на сторонний ресурс.
  • http://ваша ссылка на рекламируемый сайт/ – это ссылка на сайт, который вы рекламируете и на который должен перейти посетитель после клика по рекламе.
  • Alt “здесь ваш текст”– этот тег желательно всегда заполнять для изображений. Показывает взамен изображения альтернативный текст, в случае, когда у пользователя отключен в браузере показ картинок. Так же не будет ошибки при проверке валидации.
  • “http://путь к картинке“ — адрес картинки баннера на хостинге. Для проверки можете ввести эту ссылку в адресной строке браузера и вы должны увидеть в выдаче картинку баннера. Если путь указан неверно, получите ответ “ошибка 404”.
  • width=”240″ и height=”400″  – соответственно размер по ширине и высоте баннера. Лучше указать эти параметры для ускорения загрузки. Вы можете самостоятельно менять эти параметры для изменения размера изображения.

Давайте вспомним, где взять адрес картинки баннера. В админ панели управления сайтом заходите в раздел «Медиафайлы» (1) => «Добавить новый» (2) и выбираете файл с картинкой баннера на вашем компьютере. Загружаете его на хостинг.

Далее кликаете по загруженной картинке (1) и справа  копируете ее адрес (2).

Вставляете скопированный адрес картинки в свой код вместо =”http://путь к картинке”. В итоге получился следующий код.

<a target="_blank" rel= "nofollow" href="https://ya-blogger.ru/free/?=svoidoxod"><img src="https://sergeyneznamov.ru//wp-content/uploads/2017/02/468h60.gif"></a>

<a target="_blank" rel= "nofollow" href="https://ya-blogger.ru/free/?=svoidoxod"><img src="https://sergeyneznamov.ru//wp-content/uploads/2017/02/468h60.gif"></a>

На этом подготовка кода завершена осталось только его вставить на сайт.

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

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

Для размещения баннера в сайдбаре, в админ панели управления сайтом переходите в раздел «Внешний вид» (1) => «Виджеты» (2), выбираете слева виджет «Текст» (3) и перетаскиваете его в то место где он должен отображаться в сайдбаре. В поле «Название» (4), можно написать рекламный заголовок или оставить пустым. В поле «Текст» (5) вставляете заранее скопированный код вашего баннера.

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

Для выравнивания позиции баннера в статье и в сайдбаре  дополняем код.

Для выравнивания по центру

<center<a target="_blank" rel="nofollow" href=http://ваша ссылка на рекламируемый сайт/> <img alt="здесь ваш текст" src="https://путь к картинке" /></center

<center<a target="_blank" rel="nofollow" href=http://ваша ссылка на рекламируемый сайт/>

<img alt="здесь ваш текст" src="http://путь к картинке" /></center

Если изображение прижимается к какому- нибудь элементу cнизу, делаем нижний отступ несколько пикселей (для примера задано 10 px.)

<div_blank" rel="nofollow" href=http://ваша ссылка на рекламируемый сайт/><img alt="здесь ваш текст" src="https://путь к картинке" /></div>

<div_blank" rel="nofollow" href=http://ваша ссылка на рекламируемый сайт/><img alt="здесь ваш текст" src="http://путь к картинке" /></div>

Если картинка наезжает сверху, делаем верхний отступ (также задано 10 px).

<div><a target="_blank" rel="nofollow" href=http://ваша ссылка на рекламируемый сайт/><img alt="здесь ваш текст" src="https://путь к картинке" /></div>

<div><a target="_blank" rel="nofollow" href=http://ваша ссылка на рекламируемый сайт/><img alt="здесь ваш текст" src="https://путь к картинке" /></div>

Если что-то не понятно, смотрите поясняющее видео.

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

sergeyneznamov.ru

Как разместить баннер на сайте

09 04 2016      Дмитрий Воробьев       27 комментариев

Приветствую вас, читатели моего блога! На тему этой статьи меня вновь натолкнул вопрос в мою службу поддержки: подскажите, как разместить баннер на сайте? Не углубляясь далеко в тему, я решил написать короткую статью и приложить небольшое видео, в котором подробно покажу, как размещать рекламные баннеры.

На самом деле сложно ничего нет, и справится с этой задачей даже новичок.

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

Наиболее распространенные варианты – это вставка картинки в тело статьи и в сайдбар. Давайте разберемся, как это сделать.

Я покажу вам на примере, как можно вставить на свой сайт вот такой баннер:

 

Для работы нам потребуется специальный hlml-код:

>>>Посмотреть и скопировать шаблон кода баннера<<<

Просто скопируйте данный код и вставьте его в новом файле блокнота

Далее Вам необходимо закачать графический файл баннера на хостинг. Для этого в админ-панели вашего блога перейдите в раздел «Медиафайлы», выберите вкладку «Добавить новый» и выберите файл на Вашем компьютере.

Следующий шаг – скопируйте адрес загруженной картинки, как показано на рисунке

И затем сохраните картинку.

После этого в коде в файле блокнота замените слова ПУТЬ К КАРТИНКЕ на адрес баннера на вашем хостинге, а слова ВАША ССЫЛКА на ссылку, ведущую на сайт, который вы рекламируете.

Выглядит это вот так:

На этом подготовка завершена и переходим к самому интересному.

Как разместить баннер на сайте в статье

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

Если вы оставите код в таком виде, то баннер у вас будет располагаться слева по умолчанию. Чтобы он стал по центру, добавьте перед кодом тег <center> , а после кода тег </center>. Теперь картинка находится точно по центру.

Опубликуйте статью и проверьте, как она будет выглядеть на вашем блоге.

Как разместить баннер на сайте в сайдбаре

Зайдите в админ-панель вашего блога в раздел «Виджеты». Слева выберите виджет «Текст» и удерживая его левой кнопкой мыши перетащите в колонку сайдбара.

Поле «Название» можно оставить пустым, а в поле «Текст» нужно вставить приготовленный код баннера. Чтобы он также располагался по центру добавьте тег <center> по аналогии, как и для выравнивания баннера в статье.

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

Для удобства и наглядности я записал небольшое видео, в котором подробно показал, что и как нужно делать:

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

Помогла ли вам данная статья? Расскажите в комментариях, получилось ли у вас установить рекламный баннер на своем блоге?

Спасибо, что поделились статьей в социальных сетях!

blog-webmastera.ru

Как разместить баннер на сайте?

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

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

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

<a href="/ссылка на сайт рекламодателя" title="заголовок" target="_blank" rel="nofollow"><img src="/путь к изображению" alt="альтернативный текст" title="заголовок" /></a>

Для баннера с помощью атрибутов изображения width и height можно жестко (в пикселах) или пропорционально (в процентах) задать размеры по ширине и высоте, а с помощью style — стиль отображения баннера (границы, отступы и т. д.).

Атрибут target="_blank" в html-теге нужен, чтобы ссылка на сайт рекламодателя открывалась в новом окне или новой вкладке браузера, а атрибут rel="nofollow" необходим для того, чтобы поисковые роботы при индексации страницы с размещенным баннером не учитывали ссылку на сайт рекламодателя при расчете ссылочного веса страницы.

Если анимированный баннер выполнен в формате GIF, то его размещение на сайте осуществляется аналогично графическому баннеру. Анимированный же flash-баннер следует размещать на сайте несколько иначе: используется html-тег . Чтобы разместить баннер на сайте с помощью тега , нужно применить, к примеру, такой код:

<object type="application/x-shockwave-flash" data="images/banner.swf"><param name="quality" value="high"><param name="wmode" value="opaque"></object>

Данный код следует вставлять в html-код страницы в том месте, где планируется «повесить» баннер. Параметров и атрибутов в <object></object> может быть гораздо больше, например, можно задавать размеры горизонтального и вертикального отступов от окружающего баннер контента. С помощью событий можно изменять «поведение» баннера: по щелчку левой кнопки мыши (onclick), по двойному щелчку левой кнопки мыши (ondblclick), по перемещению курсора мыши (onmousemove), по наведению курсора мыши (onmouseover) и т. д.

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

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

Теги:как разместить баннер на сайте, разместить баннер на сайте, баннер на сайте, баннер, ротатор баннеров

webstudio2u.net

Как разместить баннер на сайте

Здравствуйте! Сегодня решила зафиксировать свои знания о том, как разместить баннер на сайте. Периодически я занимаюсь внешним видом своего сайта: заменяю какие-то баннеры, уже примелькавшиеся читателям, добавляю новые. Чтобы не “лазать” по разным папочкам на компьютере, я захотела собрать всю информацию по этому вопросу в одном месте: в этой статье на своём блоге. Думаю, кому-то эта информация тоже будет полезна.

СОДЕРЖАНИЕ

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

Код баннера для сайта

Размещение баннера в статье на сайте

Размещение баннера в сайдбаре

Видео: как разместить баннер на сайте

Заключение

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

Баннер для сайта – это некая картинка со встроенной в неё ссылкой. Таким образом, при клике по ней пользователь попадает на другой сайт.

Основная функция баннера – рекламная. Цель размещения баннера на сайте – привлечение внимания читателя, который кликнет по баннеру, если указанная на нём информация ему интересна.

С помощью размещения баннеров можно продавать товары или услуги, рекламировать партнёрские продукты (что я чаще всего и делаю), а также перенаправлять людей на какой-то другой сайт в случае необходимости. То есть, как правило, баннеры используются в качестве одного из элементов монетизации блога.

О том, как еще можно зарабатывать на блогах в интернете, я писала в этой статье.

Код баннера для сайта

Для тех, кто занимается партнёрскими программами, предусмотрена возможность сразу взять готовый баннер у автора рекламируемого продукта (в своём партнёрском кабинете) и не мучиться. Но минус такого подхода в том, что у всех партнёров баннеры будут одинаковыми. Соответственно, мало кто обратит на них внимание. Поэтому я в последнее время предпочитаю делать баннеры самостоятельно.

Для того, чтобы разместить баннер на сайте, нам понадобится код со следующим содержимым:

<center><a href=”ВАША ССЫЛКА”rel=”nofollow” target=”_blank”><img src=”ПУТЬ К КАРТИНКЕ”/></a></center>

Скопируйте этот код и вставьте в любой текстовый редактор (в блокнот, например).

Теги <center> в начале кода и </center> в конце отвечают за то, чтобы баннер находился ровно посередине текстового поля статьи (по ширине), куда будем его вставлять. Если центрирование баннера Вам не нужно, то используйте тот же код, но без указанных тегов:

<a href=”ВАША ССЫЛКА”rel=”nofollow” target=”_blank”><img src=”ПУТЬ К КАРТИНКЕ”/></a>

В этом коде необходимо сделать замену в двух местах, где заглавными буквами написано: ВАША ССЫЛКА и ПУТЬ К КАРТИНКЕ.

Размещение баннера в статье на сайте

До сегодняшнего момента на моём блоге не было баннеров, располагавшихся прямо в статьях. Они находились только в сайдбаре (в боковой колонке справа). Сейчас буду исправлять ситуацию и одновременно описывать алгоритм своих действий. Хочу разместить в этой статье баннер, ведущий на мою группу ВКонтакте.

Путь к картинке

Сначала я получу адрес пути к картинке. Для этого загружу подготовленную заранее картинку на свой блог. Картинка для статьи имеет размер 468*60 пикселей и сделана мной в программе Canva (о том, как я делаю там картинки, планирую написать в одной из следующих статей). Загрузка картинки происходит следующим образом.

  • В админ-панели сайта слева нажимаю “Медиафайлы”, затем “Библиотека”:

  • В открывшемся окне кликаю по словам “Добавить новый”, нажимаю кнопку “Выберите файлы” и нахожу на своём компьютере тот файл с картинкой, который хочу вставить на блог. Либо можно открыть окошко проводника, в котором видно, где сохранён нужный файл на компьютере, и из этого окошка перетащить файл левой кнопкой мыши прямо в поле, ограниченное штрих-пунктиром (см. скриншот ниже):

  • Проверяю в поле справа, чтобы название картинки было написано латинскими буквами с подчеркиванием или дефисами между словами (корректирую при необходимости), заполняю ячейки “Атрибут Alt” и “Описание” (так я делаю для всех загружаемых на сайт картинок):

  • В ячейке URL автоматически прописывается адрес, по которому загружена картинка (отмечено красной стрелкой выше). Это и есть ПУТЬ К КАРТИНКЕ, который я копирую (кликнув 3 раза мышкой по адресу) и вставляю в код баннера в блокноте вместо соответствующих слов:

Ваша ссылка

Захожу во ВКонтакте в свою группу, посвященную вопросам получения дохода в сети интернет, копирую ссылку на неё и вставляю в код баннера в блокноте вместо слов ВАША ССЫЛКА:

Далее выбираю место в статье, на котором я хочу видеть свой новоиспечённый баннер, например ниже, после этого абзаца. Ставлю в это место курсор и перехожу во вкладку “Текст” (наверху справа):

На скриншоте плохо видно, но я поясню: стрелочка сверху указывает на вкладку “Текст”, а снизу – на то место, где стоит курсор. У меня на блоге это место обозначается так: &nbsp;

Еще можно во вкладке “Визуально” в том месте, где находится курсор, поставить какие-нибудь отличительные знаки (например, много цифр “5”), чтобы без труда определить это место во вкладке “Текст” и вставить вместо этих цифр подготовленный код баннера.

Вставляю код, полученный выше,  и получаю вот такой баннер:

Размещение баннера в сайдбаре

Чтобы “повесить” рекламный баннер в сайдбаре, нужно воспользоваться тем же кодом, что и в предыдущем случае, только вставлять его не в статью, а в виджет.

Для начала я проделала все действия с картинкой, описанные выше (картинку загружала, конечно, другую, т.к. баннер в сайдбаре будет другой). Размер картинки – 240*400 пикселей.

Затем вставила в код баннера свою партнёрскую ссылку на бесплатный учебник по копирайтингу.

Далее в админ-панели нажала “Внешний вид”, затем “Виджеты” и перетащила виджет “HTML-код” из левого поля в боковую панель между виджетами “Рубрики” и “Свежие записи”. В открывшуюся ячейку “Содержимое” вставила подготовленный для баннера код и сохранила изменения:

В результате таких действий на моём блоге в колонке справа после блока “Рубрики” появился такой баннер:

Видео: как разместить баннер на сайте

Записала дополнительно скринкаст о том, как я размещаю баннер в тексте статьи, а также баннер в сайдбаре моего блога.

Заключение

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

С уважением, Юлия.

Спасибо, что поделились статьёй в социальных сетях!

 

larichkina.ru

Как разместить баннер на блоге: пошаговая инструкция

Приветствую посетителей своего блога!

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

Рассмотрим несколько наиболее простых способов.

Если Вам нужно поставить баннер на главную страницу в боковую панель (сайдбар)

Лучше всего это сделать через пункт меню «Виджеты» админки вордпресс.

Заходим в пункт Виджеты (Внешний вид — Виджеты).

В колонке «Доступные виджеты» выбираем «Текст» и перетаскиваем его в область вставки виджетов.

В раскрывшемся поле пишем заголовок (к примеру «Реклама»), а в большое поле вставляем HTML — код баннера. Нажимаем кнопку «Сохранить»

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

В разделе «Виджеты» нажимаем на надпись «Перейти на экран настройки темы» (рядом с заголовком Виджеты).

Появляется окно, в котором справа главная станица вашего сайта, слева меню настойки виджетов.

Открываем меню вставки виджетов садбара и нажимаем кнопку «Добавить виджет»

В открывшемся меню выбираем пунтк «Текст»

В открывшейся области записываем заголовок и вставляем код баннера и нажимаем кнопку «Сохранить и опубликовать».

Далее обновляем главную страницу своего блога и видим вставленный баннер.

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

<div align="center"><КОД БАННЕРА></div>

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

<div align="center"><a href="ВАША ПАРТНЕРСКАЯ ССЫЛКА"rel="nofollow" target="_blank"><img src="ПУТЬ К КАРТИНКЕ"/></a></div>

ВАША ПАРТНЕРСКАЯ ССЫЛКА — Это ссылка на рекламируемый Вами сайт или партнерский продукт.

ПУТЬ К КАРТИНКЕ — то место в корневом каталоге сайта, куда вы сохранили изображение баннера.

На своем блоге все баннеры сохраняю в корневом каталоге сайта в папке img

Путь к баннеру выглядит так: http://compforlife.ru/img/baner.gif

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

<div align="center"><a href="партнерская ссылка с http://"rel="nofollow" target="_blank"><img src="http://compforlife.ru/img/baner.gif"/></a></div>

Если вам нужно поставить баннер прямо в  ваш пост делаем следующее:

Копируем нужный код баннера (Ctrl+C) с сайта источника.

Берем из рекламных материалов сайта партнера.

Переходим к себе в блог. Открываем нужную запись для редактирования:

(Записи — Все записи — находим нужную — жмем на слово «Изменить»).

В левом верхнем углу в меню переходим на вкладку «Текст». Редактируемую запись теперь видно в виде HTML-кода. вперемешку с текстом.

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

Для удобства в нужном месте  можно поставить метку, например «999», чтобы быстрее найти нужное место для вашего баннера. Определившись с местом расположения баннера нажимаем Ctrl+V.

Далее переключаемся на вкладку «Визуально», чтобы посмотреть как расположился ваш баннер.

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

Нажимаем в меню админки вверху справа Обновить, переходим на ваш сайт и смотрим, что получилось. Далее корректируем ваш баннер как простоте изображение.

На этом все. Надеюсь, что статья будет для вас полезна.

Если у вас возникли какие — либо вопросы по установке баннеров задавайте их в комментариях.

С уважением, Ул Сартаков.

compforlife.ru

Как разместить баннер на сайте

Приветствую вас уважаемый посетитель!

Тема сегодняшней статьи: Как разместить баннер у себя на сайте wordpress. Часто начинающие вебмастера сталкиваются с этой проблемой.

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

Так вот она шапка сайта – и место есть, и в глаза бросается сразу любому, кто попадает на ваш сайт. Только загвоздка в том, что шаблон, понравившийся вам когда-то и добросовестно скачанный на компьютер, а впоследствии установленный на сайт, не предназначен для такого «кощунства» как вставка баннера. Не предусмотрел автор, или не хотел портить уникальность своего шедевра, оставляя дырки для баннеров.

Есть несколько выходов из создавшегося положения:

  1. Поменять к такой-то бабушке шаблон, выбрав тему со специально отведенными под баннеры местами.
  2. Плюнуть на баннер и на его размещение, довольствуясь только проставлением партнерских ссылок в тексте.
  3. Пригласить фрилансера для того, чтобы разместить баннер в шапку сайта.
  4. Внести изменения в соответствующий файл в шаблоне wordpress, тем самым добиться результата и разместить баннер на сайт.

Мы пойдем с вами по последнему пути, так как мы не привыкли отступать!

Размещать баннер на сайте путем внесения изменений в шаблон не доставляет особых хлопот, главное знать в какой файл вносить изменения. А какой файл и за что отвечает в вашем шаблоне, можете почитать в статье «Установка темы на блог». В противном же случае можно так установить баннер на сайт, что потом без вмешательства специалиста не обойтись, а это дополнительные расходы.

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

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

Размещение баннера в шапке сайта wordpress.

Мы разместим в шапку сайта баннер размерами 468 Х 60, наиболее распространенный размер, легче поместить, т.к. не имеет больших габаритов.

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

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

Далее идем в админке wordpress на вкладку Медиафайлы – Добавить новый – Выберете файл. Выбираем предварительно загруженное на компьютер изображение  баннера и закачиваем его.

Теперь смотрим путь до нашего файла, эта ссылка нам будет нужна.

Следующее, что нам нужно, это ваша партнерская ссылка на баннер.

Теперь нам нужно зайти в админку на вкладку Темы – Редактор и справа найти Заголовок (header.php).

Как обычно, открываем его и ищем код, отвечающий за вывод заголовка в файле header.php примерно такого вида:< div id=»header» >или такого:< div id=»header_title» >либо что-то похожее (в разных темах, немного по-разному), но суть одна и та же.  После него вставляем вот такой код:

1 <a href="Партнерская ссылка, куда осуществляется переход" target= "_blank"><img src="Ссылка на изображение баннера"/></a>

<a href="Партнерская ссылка, куда осуществляется переход" target= "_blank"><img src="Ссылка на изображение баннера"/></a>

«Партнерская ссылка, куда осуществляется переход» – та самая ссылка, куда будет перенаправляться посетитель при щелкании по баннеру;

egofilin.ru