Код html показ баннера на отдельной странице. Где взять HTML код баннера

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

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

Затем следует выбрать колонку, в которой Вы хотите разместить баннер.

Обратите внимание: в системе «Нубекс» баннеры можно вставить только в левую или правую колонку, соответственно, максимальная ширина баннера определяется шириной колонки: 220 точек. Если Ваш сайт использует дизайн без колонок (одноколоночник), то баннеры, добавленные в систему, на сайте не отобразятся.

После выбора колонки нужно кликнуть по раскрывающемуся меню: откроется список элементов, которые Вы можете добавить в эту колонку.

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

Размещение баннера в виде картинки

Если Вы хотите вставить баннер картинкой, выберите в меню пункт «Создать блок баннеров»: откроется раздел редактирования.

Вы можете изменять тип оформления баннера:

• ввести заголовок (необязательно): он будет отображаться над опубликованным баннером-картинкой;
• изменить стиль отображения баннера и заголовка: добавить фон или рамку для картинки, фон для заголовка.

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

Для выбора картинки — будущего баннера — нажмите на кнопку «Загрузить изображения» внизу экрана, выберите нужный файл на компьютере и нажмите «Открыть».

Обратите внимание: допустимые форматы загружаемых файлов — jpeg, jpg, gif, png; максимальный размер каждого файла — 10 Мб. В ширину картинки должны иметь не менее 200px.

После загрузки картинки Вы можете изменить параметры баннера, щелкнув по стикеру «Изменить настройки тизера» в графе «Редактирование».

Вы можете ввести подпись к баннеру (она будет отображаться под картинкой) и краткое описание (отобразится под подписью), а также добавить ссылку на интернет-ресурс: в таком случае при нажатии на баннер пользователь будет перенаправлен на тот сайт, адрес которого Вы ввели в поле «URL ссылки».

Как показать баннеры в случайном порядке

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

1. При загрузке изображений выбрать не одну картинку, а несколько — это будет основой для Вашего пула;
2. После загрузки изображений (при необходимости) для каждого из них отредактировать параметры баннера (подпись, URL ссылки, краткое описание);
3. Установить режим отображения: случайный или в порядке сортировки. Сортировать порядок изображений Вы можете кнопками «вверх/вниз» в поле, где отображаются загруженные картинки;
4. Установить количество отображаемых анонсов (1-10), т.е. то количество баннеров из пула, которое будет одновременно отображаться на странице;
5. Сохранить изменения, выйти в режим просмотра сайта и обновлять страницу до тех пор, пока меняющиеся картинки не перестанут Вас радовать.

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

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

Создаём код баннера.

И так приступим. Первым делом, необходимо загрузить изображение в определённую папку, например «images», или создать любую другую, где будут храниться наши изображения для рекламы. Затем грузим туда картинки популярных форматов (jpg, gif, png). Теперь напишем путь для нашей картинки:

На этом коде говорится следующее. Тег заявляет браузеру, что данный элемент картинка, или изображения. Далее атрибут «srс» указывает путь к этому изображению. Затем идёт сам путь, это адрес сайта, папка «uploads» и непосредственно сам файл, который я назвал «banner_sitestroy» расширением «gif». После всего этого закрываем действие атрибута вот таким образом « />». Теперь необходимо указать следующее: ширину баннера (width), высоту баннера (height), альтернативный текст (alt=), текст при наведении, на изображение (title=) и поставить нулевое значение для бордюра (border="0"), что бы он случайно не появился в некоторых браузерах.

Gif" width="468" height="60" alt="banner_sitestroy.gif" title="Какой-то текс при наведении!!!" border="0" />

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

Рисунок №1.

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

Здесь мы видим, тег , который говорит браузеру, что это ссылка, далее атрибут «href» означающий начало пути ссылки, сама ссылка и завершает всю церемонию, тег «target» с атрибутом «_blank», который откроет адрес партнера, в новой вкладке, не закрывая наш сайт. Весь этот код необходимо вставить перед кодом, картинки, а после её вставить закрывающий тег ссылки . В общем, что бы получилось вот так:

В общем, это готовый код для баннера 468х60, который можно скопировать, вставить реальные данные и он готов. Для баннеров других размеров, просто поменяйте значение «width» (ширина) и height (высота).

В интернете полно ресурсов, рассматривающих создание и описание баннера в виде кода. Среди них можно привести, например, 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 в форму внизу и получить бесплатную книгу, нажав на кнопку «Получить». Попробуйте!

Число активных пользователей и поклонников социальных сетей стремится к 100% от общего количества пользователей всемирной паутины. При этом лидирующие позиции в Рунете стабильно занимает социальная сеть ВКонтакте. Кроме того она считается самой массовой — более 150 миллионов зарегистрированных пользователей и это без учета ботов, заброшенных и фейковых аккаунтов.

Данный факт не мог быть не использован в рекламных целых. Сегодня ВКонтакте предлагает самую удобную рекламу, как для простых пользователей, таких и для рекламных агентств. При этом наибольшей популярностью пользуются баннеры ВКонтакте. Пользователи эффективно используют их для развития бизнеса и информирования о событиях в группах-сообществах:

1. Баннеры ВКонтакте

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

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

Этакий гибрид профессиональной и пользовательской рекламы способен одним выстрелом убить двух зайцев. За счет него администрация ведущей российской социальной сети и увеличила целевую аудиторию рекламодателей почти вдвое:

Типы рекламы ВКонтакте

Условно реклама ВКонтакте делится на два типа (по способу оплаты ). Ее можно называть целевой и нецелевой. Если при целевой рекламе вы платите за переходы по баннеру, то при нецелевой – за показы. При этом 1000 показов обходится гораздо дешевле, чем 1 переход. Как не крути, но с 1000 показов вероятнее всего субъект совершит минимум 1 переход. Поэтому второй вариант оказывается выгоднее.

• Картинка. Тематическое изображение, характеризующее ваш товар/услугу, страницу в социальной сети и т.п.;
• Название. Это может быть громкий слоган, имя компании;
• Подпись. Короткая запись или уникальное торговое предложение (если размер баннера позволит его вместить ).

Правила размещения рекламы ВКонтакте

2. Зачем нужны баннеры ВКонтакте?

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

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

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

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

Перед тем, как вставить баннер, проверьте есть у рекламируемой продукции/бренда сообщество, фан-группа, паблик. Их наличие в значительной мере повысит шансы на успех вашей рекламной кампании.

Кроме того, обратите внимание на ценовую категорию. В социальных сетях нет смысла продвигать товары, стоимость которых превышает 200 долларов:

3. Как разместить баннер ВКонтакте? Шпаргалка для новичков, секреты и советы

Перед тем, как добавить баннер, перейдите по ссылке «Реклама » в футере страницы:

Наибольшей популярностью пользуется последний вариант. Ссылка с такого баннера ВКонтакте, как правило, перенаправляет пользователей на landing page (посадочную страницу ).

Форматы баннерной рекламы ВКонтакте

Можно использовать три типа объявлений:

• Картинка+текст. Здесь можно разместить баннер ВКонтакте 90 на 65 пикселей с заголовком (25 символов ) и описанием (60 символов );
• Большая картинка. Есть возможность добавить баннер размером 90 на 120 пикселей без описания и с заголовком в 25 символов;
• Эксклюзивный вариант. Баннер 90 на 160 пикселей с заголовком в 25 знаков. Главное его преимущество заключается в том, что во время его демонстрации другие объявления не показываются. Однако и стоимость такой рекламы в 2 раза выше.

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

Чем точнее будет настроена целевая аудитория, тем лучше CTR , а при хорошей посещаемости и конверсия.

На завершающем этапе настройки, перед тем как сделать баннер ВКонтакте, указываем способ оплаты (за показы или переходы ), рекламные площадки (можно дополнительно выбрать сайты-партнеры социальной сети ), стоимость перехода. Присваиваем рекламной кампании название.

Жмем «Создать объявление »! И ждем, пока оно пройдет модерацию. Как правило, уже через пару часов ваши баннеры ВКонтакте начнут демонстрироваться потенциальным клиентам. Теперь ваша задача — отслеживать статистику, которую представляет социальная сеть ВКонтакте и своевременно принимать решения по улучшению показателей.

4. Как вставить баннер в группу ВКонтакте?

Давайте рассмотрим, как сделать баннер в группе ВКонтакте.

Шаг 1. Заходим на страницу группы:

5. Баннерная реклама ВКонтакте

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

Реклама в Facebook рассчитана на старшую аудиторию, Одноклассники хорошо охватывают регионы. При этом баннерная реклама ВКонтакте – универсальное решение, позволяющее продвигать бренды и новые товары среди молодежи. Она работает там, где ваши потенциальные клиенты отдыхают, и говорит с ними на их языке, находится в сфере их интересов.

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

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

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

Заходим в виджеты и добавляем следующий код:

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

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

7. Создание баннеров для ВКонтакте

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

Итак, баннер должен содержать информацию, вызывающую интерес, мотиватор на переход/клик, быть красивым, иметь профессиональное графическое исполнение.

Существуют несколько способов создания баннеров:

• Заказ у дизайнера;
• Самостоятельное создание в графическом редакторе;
• Использование специальных программ для создания баннеров;
• Создание с помощью онлайн сервисов.

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

Сначала вы выбираете фон и размер, затем добавляете надпись во вкладке «Текст », изменяете стиль, цвет и размер шрифта, а далее работаете над эффектами (рамками, тенями и т.д. ). На завершающем этапе сохраняете баннер в нужном формате.

Анимированный баннер можно создать с помощью программы Easy GIF Animator . Данная программа предоставляет 20 ознакомительных запусков, что позволит вам создать несколько баннеров бесплатно. Интуитивно понятный интерфейс позволит вам быстро справиться с поставленной задачей.