Баннер вконтакте - как сделать и разместить самому. Где взять HTML код баннера Создание баннеров для ВКонтакте
с формой подписки. На эту страницу захвата нужно направлять посетителей. Используем для этого социальные сети, рассылки и т.д. И здесь совсем не лишним будет наличие на видном месте, как правило, в сайт баре и не только, привлекающего внимание баннера, при нажатии на который посетитель попадает на ту же страницу захвата.Здесь и возникает вопрос, как сделать баннер и создать его код.
Что такое баннер и как разместить готовый баннер на сайте рассмотрено ранее в статье Здесь же мы рассмотрим коротко со ссылками на другие ресурсы сам процесс изготовления, а также подробнее, вызывающее затруднения у начинающих, создание кода баннера для вставки на сайт.
Процесс создания баннера начинается с рисования картинки. Если Вам нужен статический баннер , то достаточно одной картинки, если Вам нравится анимированный баннер , то рисуется столько картинок, сколько нужно для качественного процесса анимации. Если у Вас возникают трудности с работой в программе фотошоп, можно воспользоваться более простой программой онлайн сервиса « 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+CSS. Скопируйте готовый код элемента с сайта рекламодателя и отредактируйте его согласно общим правилам форматирования. Для внесения исправлений используйте копию страницы своего сайта, никогда не делайте правки сразу на сервере. Код баннера представляет собой стандартную html-разметку со стилями, расположенными внутри тегов. Они должны находиться в отдельных файлах и быть связаны друг с другом селекторами. Особое внимание уделите проверке уникальности классов и id в коде проекта. Никакие другие элементы не должны влиять на отображение баннера. Убедитесь, что названия селекторов не пересекаются, с помощью поиска в привычном для вас редакторе файлов (обычно вызывается по нажатию Ctrl+F). Посмотрите, нет ли в коде подозрительных элементов. Простейший баннер состоит из двух тегов: и