является href – адрес, по которому ведет баннер. Часто используется title – подпись для линка, а также target – указание открывать рекламу на новой странице или вкладке. За размещение изображений отвечает тег . Он всегда содержит атрибут src – указание относительного или абсолютного пути до картинки. Также внутри могут использоваться подсказки title и alt.
Запустите измененную копию страницы в браузере. Посмотрите, как отображается баннер в разных веб-обозревателях. Попробуйте изменить размер и масштаб окна. Если реклама расположена правильно и по нажатию на нее происходит переход на нужный сайт, сохраните код в редакторе.
Далее целиком замените оригинальную страницу только что сделанным дубликатом с рекламой. Для этого удобнее всего воспользоваться ftp-клиентом, например, бесплатной и кроссбраузерной программой FileZilla . Просто перетащите новый файл в правильный раздел каталога. Название дубликата должно совпадать с оригиналом, чтобы не нарушить структуру ссылок на сайте. При одинаковых названиях ftp-клиент предложит заменить страницу более новой. После этого перезагрузите свой сайт и еще раз убедитесь, что баннер правильно отображается.
Если ваш сайт или блог работает на популярной CMS WordPress, зайдите в консоль управления интернет-ресурсом. На боковой панели найдите раздел «Внешний вид» и выберите пункт «Виджеты».
У новичков часто возникает вопрос, как установить баннер на сайте. Делается это достаточно просто. Но последние обновления Вордпресс заставляют делать это иначе, чем это делалось некоторое время назад. В статье будет показано, как установить баннер на сайте WordPress через новое поле HTML. Кроме того, мы рассмотрим, где взять код баннера для вставки на сайт.
Как установить баннер на сайте за три минуты
Здравствуйте! О том, как установить баннер на сайте, а точнее в сайдбаре, писалось в статьях на блоге. Это достаточно простая операция. Для этого нужно было перейти в панель управления, выбрать «Внешний вид», «Виджеты», перетащить свободное поле «Текст» в нужное место. Далее нужно было написать заголовок и вставить html код баннера в окно. После обновления рекламный баннер красовался в нашем сайдбаре.
Таким образом, устанавливались баннеры (картинки), как на свои товары, так и на чужие, например, партнерские. Все течет, все меняется, изменилась версия WordPress. Например, в версии 4.8. баннеры устанавливаются немного иначе.
Рассмотрим, как установить баннер на сайте за три, пять минут в новых версиях Вордпресс. Для этого по-прежнему заходим в панель управления, выбираем «Внешний вид», «Виджеты». Обратите внимание, что у нас появилось новое поле «HTML-код». Наводим мышкой на это поле и перетаскиваем его в то место, где мы хотим установить баннер.
А далее прописываем в полях заголовок и прописываем код баннера. Не забываем обновиться. Переходим на главную страницу сайта, обновляемся и видим, что всё работает. Все подробности показаны в прилагаемом ниже видео.
Где найти код баннера для вставки на сайт
Итак, в предыдущей части статьи мы рассмотрели, как установить баннер на сайте. Теперь кратко разберемся, где взять код баннера для вставки на сайт. Здесь все просто, ничего не изменилось. Но для новичков, которые никогда это еще не делали, пару слов скажу – Вам его нужно создать самим.
Для этого нужно использовать формулу, которую можно взять в статье . Вы просто скопируйте код со статьи (формулу), а далее вставляйте в неё свои две ссылки. Одна ссылка будет вести на картинку, закачанную ранее на блог, вторая – на лендинг (это подписная или продающая страницы). Все подробности Вы можете посмотреть также в прилагаемом ниже видео:
Для размещения дополнительной информации на сайте (в текстовом формате, в виде картинки или анимации, со ссылкой на интернет-ресурс и т.д.) удобно пользоваться баннерами. Такой инструмент позволит дополнить контент Вашего сайта, не нарушая его структуру, эстетику и удобство пользования. При этом добавление баннера на Ваш сайт с помощью конструктора «Нубекс» не потребует технически сложных манипуляций и займет не более пяти минут.
Для того, чтобы вставить баннер на сайт, необходимо войти в режим управления сайтом и в панели управления (слева) выбрать раздел «Виджеты».
Затем следует выбрать колонку, в которой Вы хотите разместить баннер.
Обратите внимание:
в системе «Нубекс» баннеры можно вставить только в левую или правую колонку, соответственно, максимальная ширина баннера определяется шириной колонки: 220 точек. Если Ваш сайт использует дизайн без колонок (одноколоночник), то баннеры, добавленные в систему, на сайте не отобразятся.
После выбора колонки нужно кликнуть по раскрывающемуся меню: откроется список элементов, которые Вы можете добавить в эту колонку.
Вы можете разместить баннер как в виде картинки, так и в виде кода (созданного Вами или полученного от партнера/исполнителя).
Размещение баннера в виде картинки
Если Вы хотите вставить баннер картинкой, выберите в меню пункт «Создать блок баннеров»: откроется раздел редактирования.
Вы можете изменять тип оформления баннера:
- ввести заголовок (необязательно): он будет отображаться над опубликованным баннером-картинкой;
- изменить стиль отображения баннера и заголовка: добавить фон или рамку для картинки, фон для заголовка.
Обратите внимание:
по умолчанию система предлагает Вам отображать баннер как на главной, так и на всех внутренних страницах сайта. Если Вам необходимо добавить баннер только на главную страницу (или только на остальные), уберите нужные галочки в меню вверху страницы. Отобразить баннер только на некоторых (не всех) внутренних страницах сайта невозможно.
Для выбора картинки — будущего баннера — нажмите на кнопку «Загрузить изображения» внизу экрана, выберите нужный файл на компьютере и нажмите «Открыть».
Обратите внимание:
допустимые форматы загружаемых файлов — jpeg, jpg, gif, png; максимальный размер каждого файла — 10 Мб. В ширину картинки должны иметь не менее 200px.
После загрузки картинки Вы можете изменить параметры баннера, щелкнув по стикеру «Изменить настройки тизера» в графе «Редактирование».
Вы можете ввести подпись к баннеру (она будет отображаться под картинкой) и краткое описание (отобразится под подписью), а также добавить ссылку на интернет-ресурс: в таком случае при нажатии на баннер пользователь будет перенаправлен на тот сайт, адрес которого Вы ввели в поле «URL ссылки».
Как показать баннеры в случайном порядке
Если Вы хотите, чтобы при каждом обновлении страницы (или при переходе в другой раздел сайта) у пользователя отображался случайный баннер из определенного набора (пула), при создании блока баннеров нужно сделать следующее:
- При загрузке изображений выбрать не одну картинку, а несколько — это будет основой для Вашего пула;
- После загрузки изображений (при необходимости) для каждого из них отредактировать параметры баннера (подпись, URL ссылки, краткое описание);
- Установить режим отображения: случайный или в порядке сортировки. Сортировать порядок изображений Вы можете кнопками «вверх/вниз» в поле, где отображаются загруженные картинки;
- Установить количество отображаемых анонсов (1-10), т.е. то количество баннеров из пула, которое будет одновременно отображаться на странице;
- Сохранить изменения, выйти в режим просмотра сайта и обновлять страницу до тех пор, пока меняющиеся картинки не перестанут Вас радовать.
с формой подписки. На эту страницу захвата нужно направлять посетителей. Используем для этого социальные сети, рассылки и т.д. И здесь совсем не лишним будет наличие на видном месте, как правило, в сайт баре и не только, привлекающего внимание баннера, при нажатии на который посетитель попадает на ту же страницу захвата.Здесь и возникает вопрос, как сделать баннер и создать его код.
Что такое баннер и как разместить готовый баннер на сайте рассмотрено ранее в статье
Здесь же мы рассмотрим коротко со ссылками на другие ресурсы сам процесс изготовления, а также подробнее, вызывающее затруднения у начинающих, создание кода баннера
для вставки на сайт.
Процесс создания баннера начинается с рисования картинки. Если Вам нужен статический баннер
, то достаточно одной картинки, если Вам нравится анимированный баннер
, то рисуется столько картинок, сколько нужно для качественного процесса анимации. Если у Вас возникают трудности с работой в программе фотошоп, можно воспользоваться более простой программой онлайн сервиса «
Photo
editor
online
»
(рисунок 1,). Является он сильно упрощенным вариантом фотошопа, но иногда для создания простой картинки вполне достаточен. Для входа достаточно нажать название сервиса «Photo editor online».
Рисунок 1. Верхняя панель онлайн сервиса «Photo editor online»
В этом сервисе предоставлены возможности создания нового рисунка, загрузки изображения с компьютера, загрузки изображения по URL
, открытия изображения из библиотеки и даже с Вашего мобильного телефона/планшета (рисунок 2).
Рисунок 2. Окно функциональных кнопок онлайн сервиса «Photo editor online»
В интернете полно ресурсов, рассматривающих создание и описание баннера в виде кода. Среди них можно привести, например,
bloguspeh.ru
, Banner Fans,MyBannerMaker, dabuttonfactory.com, all-gif.narod.ru/baner.htm, danilidi.ru, odnaknopka.ru.
Создание своей картинки с анимацией (gif файл)
довольно простым и понятным методом в редакторе FastStone
подробно представлено в материале
Эдуарда Питерцева
.
Там же он рассказывает и о самом редакторе FastStone. Простой способ создания баннера представляет в своих видеоуроках
Сергей Медведев
.
Процесс написания кода подробно рассматривается на ресурсе Марии Риш.
Можно, конечно, покопавшись разобраться и воспользоваться любым из приведенных ресурсов, но я предложил бы для новичков простой, опробованный в свое время мной самим путь.
Создание картинки
Создаем картинку с использованием онлайн сервис «Photo editor online».
Разобраться там легко прямо в самом сервисе. Если есть хотя бы первоначальные общие навыки по работе в программе фотошоп,
конечно лучше использовать ее. Там намного больше возможностей для выражения Вашей индивидуальной задумки.
Получение
URL
места, где лежит картинка
Созданную и сохраненную у себя на компьюторе картинку, загружаем к себе на сайт. Для этого заходим в админ панель сайта на движке
WordPress
, в консоли находим «Медиафайлы»
à
«Добавить новый»
и нажимаем «Добавить новый»
(рисунок 3).
Рисунок 3. Консоль сайта
В открывшемся окне (рисунок 4) нажимаем кнопку «Выберите файл».
Выбираем файл с созданной и сохраненной у себя на компьюторе картинкой. В окошке (рисунок 5) появляется название выбранной картинки. Нажимаем активирующуюся при нажатии кнопку «Загрузить»
и открывается окно «Библиотека файлов»
(рисунок 6).
Рисунок 4. Окно выбора нового медиафайла
Рисунок 5. Окошко загрузки нового медиафайла
Рисунок 6. Окно «Библиотека файлов»
Рисунок 7. Окно «Изменить медиафайл с требуемой ссылкой на нашу картинку
Создание кода баннера
Сразу скажу, что не советую новичкам создавать код самим, например, как показано на ресурсе Марии Риш.
Дело это тонкое, требует внимательности и определенных навыков. Процентов 99, что у Вас не скоро получится. В конце концов, наша цель – зарабатывать деньги, а не изучать язык
HTML
. Поэтому, заходим на замечательный сервис
http://webanet.ucoz.ru/index/0-14
,
нажимаем «Генератор
HTML
кода баннеров и кнопок» и заполняем поля в окне (рисунок 8).
Рисунок 8. Окно генератора HTML кода баннеров и кнопок сервиса WEB.A.NET
Ввод данных обычно затруднений не вызывает. Единственное, в поля «Ширина и высота баннера»
значения нужно вводить в пикселях. После заполнения полей нажимаем кнопку «Сгенерировать код»
и в окошке «Скопируйте готовый код из этой формы»
получаем готовый код для вставки в наш сайт бар. Еще раз напомню, что процесс размещения баннера (вставки кода) подробно приведен в статье
В этом окне видим ссылку нафайл с нашей картинкой. После вставки кода в нашем сайт баре видим, например, такую картинку (рисунок 9). При нажатии на картинку, открывается страница подписки на бесплатную книгу
Попробуйте!
В то же время можно не нажимая на картинку ввести свои имя и
E
-
mail
в форму внизу и получить бесплатную книгу, нажав на кнопку «Получить».
Попробуйте!
Баннер на сайт
мы добавляем для рекламирования товара, услуги, продвижения бренда, раскрутки имиджа, и так далее.
Располагая код баннера на сайте, по сути, мы пытаемся что то продвинуть, раскрутить.
Как можно использовать баннеры практически?
Возможностей использования баннерной рекламы может быть сколько угодно. Давайте возьмем реальный пример из жизни. Например, Вы зарегистрировались в партнерской программе. В рамках этой программы, Вы получаете партнерские ссылки, с помощью которых можно продвигать товар.
Как правило, вместе с продвижением товара, для того, чтобы Ваши доходы были выше, Вы получаете реферальную ссылку для привлечения других партнеров.
В качестве материалов в партнерской программе, Вам могут предоставить готовые баннеры. Таким образом, размещая код баннеров в сети, например на своем сайте, Вы рекламируете товар и набираете собственных партнеров.
HTML
код баннера.
Давайте рассмотрим, самый простой HTML код баннера. По определению, в коде баннера должна быть картинка и адрес ссылки, на которую ведет баннер:
Как вставить
HTML
код баннера на страницу сайта.
Если Ваш сайт состоит из HTML страниц, то тут все очень просто. Открываете страницу сайта HTML редактором, и добавляете в нужное место код баннера, и закачиваете на сайт, вот и все.
Возможно, Ваш сайт работает под управлением CMS WordPress, тогда для добавления баннера можно воспользоваться вкладкой “Виджеты”. Выбираете виджет “Текст” перетаскиваете его в нужное место и вставляете код баннера.
На страницах сайта, у меня есть много информации о том, как создать сайта на “Народе”. В случае, на этом сервисе, тогда для добавления кода баннера, необходимо сделать шаги, описанные .
Многие сайты на своих страницах выкладывают код собственных баннеров.
Это делается для того, чтобы посетители, имеющие собственные сайты, могли скопировать этот код и добавить его на свой сайт, тем самым продвигая его в Интернет. Естественно это делается в тех случаях, когда сайт понравился или при простом обмене баннерами.
Естественно, как только появился Интернет, баннерная реклама, с сразу получила широкое распространение в сети.
Баннеры используют, не смотря на различные мнения.
Если Вы проедите по улицам любого города мира, то наверняка, встретите кучу баннерных стендов, растяжек, вывесок, с рекламой товара, фирмы, услуг.
Почему баннеры так популярны?
Человек скорее отреагирует на изменяющейся объект, чем на объект, который находится в статическом состоянии. Не важно, что меняется, цвет, размер или положение, мы на такие изменения быстрее отреагируем. Именно эти способности человека и используют разработчики рекламы.
В большинстве случаев, когда мы знаем, где и что искать, баннерная реклама нас будет раздражать. Но когда мы ищем что то конкретное и информация об этой вещи “крутится” в баннере, то, скорее всего, мы отреагируем на баннер и посмотрим, “что там такое предлагается”.
И, вполне возможно, кликнув по баннеру, мы найдем, тот товар который ищем. При этом, подсознание нам говорит, раз это везде рекламируют, значит товар будет хорошего качества.
Получается, что баннеры при определенном стечении обстоятельств, выполняют возложенную на них роль.
Похожие публикации