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

Детские товары 31.03.2019

Детские товары

12.11.14 30.7K

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

Что такое баннеры

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

Современный рост эффективности баннерной рекламы связан с использованием контекстного таргетинга. При этом на баннерах сайта рекламируют только те товары и услуги, которые «созвучны » с тематикой ресурса:

Хорошо бы узнать, как можно сделать баннер для сайта. Но для начала нужно разобраться с существующими типами баннеров. Различают следующие их типы:

Статические баннеры – состоят из статического изображения. Представляют собой рисунки в формате JPEG или PNG . Характеризуются малым весом, не влияющим на скорость загрузки страницы.
Анимированные баннеры – анимация создана с помощью GIF . Состоит из нескольких картинок, сменяющих друг друга с заданной частотой. Вес баннера зависит от количества используемых в нем изображений.
Flash – в таком баннере анимация сделана на основе Flash . Она может реагировать на действия пользователя.

Интерактивное содержимое может быть представлено в форме игры или анкеты с добавлением звука. Рисунки для анимации создаются с помощью векторной графики.

Существует много различных размеров баннеров для сайта. Но самыми популярными из них являются:

88 на 31 пиксель;
120 на 60 пикселей;
120 на 90 пикселей;
120 на 240 пикселей;
125 на 125 пикселей;
120 на 600 пикселей;
160 на 600 пикселей;
180 на 150 пикселей;
234 на 60 пикселей;
240 на 400 пикселей;
250 на 250 пикселей;
300 на 600 пикселей;
300 на 250 пикселей;
336 на 280 пикселей;
150 на 150 пикселей;
468 на 60 пикселей;
728 на 90 пикселей.

Признаки эффективного рекламного баннера

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

Привлекать внимание пользователя – но это не значит, что баннер должен быть чересчур ярким и мигающим. Такая реклама вызовет у посетителя раздражение, а не внимание. Содержимое баннера должно ненавязчиво «намекнуть» пользователю о своем присутствии. Поэтому при подборе изображения и текста для него всегда должен учитываться психологический фактор;
Вызвать интерес – баннеры для сайта должны вызывать у пользователя интерес к объекту рекламы. Товар или услуга должны быть поданы не только со вкусом, но и оригинально. Приветствуется использование легкого остроумия и юмора:

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

Закономерности, которые стоит учитывать перед тем, как размещать баннер на сайте:

Чем больше баннер, тем выше вероятность перехода по нему пользователя. Самым эффективным размером считается 240 на 400 пикселей;
Наибольшим эффектом обладает баннерная реклама, размещенная сверху (в шапке ). Также она может быть размещена сбоку или внизу страницы, но эффективность здесь несколько ниже;
Анимированные баннеры способны быстрее привлечь внимание пользователя – интуитивно глаз человека реагирует на движение.

Создание и размещение рекламного баннера

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

Код большинства баннеров соответствует шаблону:

a href=»/ссылка на сайт рекламодателя» – адрес ресурса, на который приведет пользователя щелчок по баннеру;
title=»заголовок» – текст, отображающийся в сплывающей подсказке при наведении на область баннера;
target=»_blank» – задает правила отображения сайта рекламодателя после перехода по ссылке баннера («_blank»- откроется в новом окне);
rel=»nofollow» – запрещает поисковикам обработку этой ссылки;
img src=»/путь к изображению» – задает путь к изображению, отображаемому в баннере;
alt=»альтернативный текст» – текст, который будет отображен в баннере, если его рисунок не загружен.

Но не обязательно разрабатывать баннер самостоятельно. Для этого можно воспользоваться специальными онлайн-генераторами. Чтобы сгенерировать код баннера на таком сервисе, нужно заполнить несколько полей и нажать на кнопку:

Или можно заказать создание баннера в профессиональной студии. Тогда это обойдется дороже… Вот примерные расценки:

Разработка обычного GIF баннера – от 25$;
Создание баннера на основе Flash – 70-150$;
Ресайз – примерно 50% от первоначальной его цены.

Но если немного помудрить, то можно сотворить простенький баннер самостоятельно. Вот какое чудо получается после десяти минут манипуляций с кодом html и изображением в Coreldraw :

Код баннера:

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

Вот что получилось:

Код примера:

Создание анимированных и видео баннеров

Рассмотрим на примере как сделать анимированный баннер с помощью программы Ulead GIF Animator .

Генератор составления кода для баннера. Составление кода банера онлайн процедура простая и незатейливая. А зачем вообще нужен банер на сайт?
На сайт баннер мы добавляем для того, чтобы рекламировать товар, услуги, продвижения бренда, показать свой товар.

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

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

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

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

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

Online сервис получения кода баннера

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

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

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

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

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

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

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

Для его создания используется уже не растровая графика, как в двух предыдущих случаях, а векторная, которая прекрасно масштабируется (без потери качества) и из Flash-баннера размера 468×60 можно запросто получить вот такого монстра, просто изменив значения его размера по высоте и ширине.

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

Этот вариант кода вставки Flash-баннера на сайт является наиболее универсальным. Тут происходит дублирование за счет использования двух аналогичных тегов Embed и Object. Причем первый не является валидным, но некоторые старые браузеры не понимают Object и поэтому приходится перестраховываться.

Если валидный Html код для вас является превалирующим, то используйте только Object, например, так:

Различные атрибуты тега Param используются для настройки работы Flash-проигрывателя, который, кстати, загрузится на компьютер пользователя по приведенной в атрибуте Codebase ссылке (если, конечно, он не будет найден на компе пользователя). Подробнее познакомиться с предназначением различных операторов настройки флеш плеера для тегов Embed и Object вы сможете на этой странице .

Цена за размещение и ротатор банеров

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

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

На самом деле возможно несколько вариантов установления цены:

Фиксированная цена — такое-то место на сайте будет стоить столько-то рублей или долларов за 30 дней размещения баннера такого-то размера (пример смотрите ). Этот вариант часто используется при ценообразовании на рынке баннерной рекламы в рунете. В этом случае вам не нужно будет заморачиваться с подсчетом эффективных показов, с учетом кликов произведенных по рекламному блоку.

Получили графический или же флеш файл от рекламодателя, поставили его в оговоренную позицию и на ваш счет капнула определенная сумма Вебманей или денег Яндекса (у меня были даже случаи оплаты через международные деньги Pay Pal, но их сложно выводить на постсоветском пространстве). Цену можно будет регулировать в зависимости от активности и количества рекламодателей. Чем больше спрос — тем выше цена.

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

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

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

Из бесплатных полноценных рекламных движков можно выделить OpenX , который вы должны будете установить на свой собственный сервер (можно и виртуальный), что вызовет дополнительные расходы, т.к. данная система по отзывам довольно прожорлива. Опять не идеал.

Однако идеал существует. Это купленная когда-то Гуглом система под названием DoubleClick for Publishers Small Business . Она бесплатная, обладает всей мощью Google (а значит о тормозах не может быть и речи) и позволяет подключать Адсенс в том случае, когда не найдется прямых рекламодателей. Красота, но чертовски непонятная штука. Два раза пытался читать русский хелп, но оба раза понимал, что ничего не понимаю. А обучающее видео имеет место быть только на недоступных моему пониманию языках.

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

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

При этом в ссылку с каждым из них (находящихся в ротации) можно будет внедрить уникальную метку, по которой рекламодатель сможет собрать статистику и отсеять в итоге неэффективные варианты. Я, например, использую наипростейший PHP скриптик, который решает проблему ротации баннеров :

"; $img = ""; $max = count($img) - 1; $count = rand(0,$max); echo $img[$count]; ?>

Это простейший ротатор и, что примечательно, конструкцию:

можно будет повторять нужное количество раз. Этот же скрипт подойдет и для ротации Flash-баннеров с их громоздким кодом. Главное при этом размещать этот самый код строго между одинарных кавычек переменной массива $img = "тута"; .

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

Как самому сделать баннер онлайн

Я, конечно же, понимаю, что создание банеров прежде всего является прерогативой профессионалов. Нужен особый взгляд, опыт и талант, наконец. И даже хорошее знание популярных графических редакторов (аля ) не даст вам полной уверенности в успехе, ну а уж если вы таким знанием не обладаете, то окунаться в дело создания эффективных графических рекламных блоков не стоит. А может быть стоит?

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

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

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

На первой вкладке «Макет» вам будет предложено выбрать габариты будущего банера из выпадающего списка стандартных размеров, либо указать свой собственный нестандартный. Далее вам нужно выбрать цветовое решение:

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

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

Вписываете нужный вам текст для каждой линии и выбираете тип шрифта, которым будут прописаны слова. Шрифтов очень много, но поддержку русского я нашел только в группе «Stock»:

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

На следующей вкладке «Воздействие» вы сможете задать направление падения света для отбрасывания тени, собственно, ширину тени, ее цвет, а также ширину и цвет обводки букв текста линий:

Ну вот, на следующей вкладке выбираете тип рамки для создаваемого баннера (если она вообще нужна), а потому уже на вкладке «Формат» выбираете тип изображения растровой графики, в котором вы предпочитаете сохранить данный шедевр (jpg, png или gif).

Какой именно формат выбирать, решать вам самим, но можете просто попробовать все, а при нажатии на кнопку «Скачать» посмотреть, какой же формат является наиболее экономичным для вашего случая. Будем считать, что сделать простой графический блок нам удалось. Но наибольшим эффектом будет обладать анимированный баннер . Как можно его сделать?

Для начала достаточно изготовить несколько кадров будущего анимированного шедевра в уже описанном сервисе Bannerfans. Сохранять итоговые изображения нужно будет уже строго в формате Gif, ибо только он позволит нам достигнуть желаемого результата (правда сервис может и преобразовать в Gif другие форматы, но лучше будет сразу соответствовать). Можно, например, на одном кадре оставить только верхнюю линию, на втором добавить еще и нижнюю, а потом написать какую-нибудь замануху-небылицу. В общем, все зависит от богатства фантазии.

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

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

Если полученный результат создания анимации вас устраивает, то жмите на кнопку «Скачать эту анимацию», а если не устраивают, то «Продолжить редактирование»:

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

");">

Вам может быть интересно

Dropbox - как пользоваться облачным хранилищем данных, а так же работа с программой Дропбокс на компьютере и в мобильном
Иконки, значки, фоны, картинки и логотипы для сайта (онлайн-сервисы IconFinder, Freepik, PSDGraphics и другие) Апометр - бесплатный сервис по отслеживанию изменений выдачи и апдейтов поисковых систем

2 голоса

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

Сегодня же я расскажу немного о другом методе баннерной рекламы. Речь пойдет не о контексте, но чем-то приближенной. Этот способ заработка элементарен до безобразия и более прибылен.

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

Приступим?

Сервис для создания баннеров

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

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

Ну что ж, давайте начнем.

Первое, что вам нужно сделать, зайти на сайт Bannerovich и перейти в конструктор баннеров. Будьте внимательны, не редактор, а именно конструктор.

Теперь вводите название проекта. Задайте ширину и высоту баннера, можно при помощи ползунков над кнопкой «Создать баннер» или ввести цифры в по бокам визуального эскиза. Обратите внимание, что представлен он здесь не в полном размере, а всего лишь с сохранением пропорций. Мой результат будет в несколько раз больше.

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

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

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

Теперь вы можете добавить кнопку. Нажмите на этот элемент, я расскажу более подробно о его функциях.

С основными настройками думаю, что проблем не возникнет. Наверняка вы и сами разберетесь с тем, что такое верхний и нижний цвет, вкругление углов и текст. Я хочу поговорить про Open Link Tab. Так как сама кнопка не анимированная, сменяются только изображения в заданное время, то я рекомендую вам не ставить на нее линк, а использовать ссылку для всей картинки.

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

Теперь можете добавить текст. Здесь тоже нет ничего сложного.

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

Теперь вам нужно щелкнуть на «Получить баннер».

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

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

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

Чуть ниже появится вам проект и html код, который будет нужно добавить на сайт. Скопируйте его.

Как добавить баннер на все страницы

Откройте и зайдите во вкладку «Внешний вид – Виджеты».

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

Кстати, куда именно вы поместите этот виджет, там он и расположится визуально. Если над «Поиском», как я, то картинка встанет над этой панелью. Если под «Рубрики», то… ну вы поняли.

Вставьте скопированный текст в «Содержимое» и поменяйте информацию в кавычках после «a href» здесь должна быть ссылку, куда будет вести ваш баннер. Измените также текст в кавычках после title. Это добавит вашу подсказку. Сейчас она будет выглядеть, как «Баннер сделан на Баннерович».

Вот так у меня получилось в итоге, после всех изменений.

На всех страницах сайта теперь у меня появился этот рисунок.

Добавляем баннер в записи

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

Откройте вкладку «Текст» в правой верхней части поля ввода информации, вставьте html код, измените ссылку и заголовок. Если после этого вы снова откроете «Визуально», то увидите картинку. Ее можно окружить нужным вам текстом.

Готово. Вот так мой баннер.

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

Кстати, создание баннеров – это уже хороший способ делать деньги. Могу предложить вам курс «Как заработать, создавая баннеры ». Это хобби может приносить от 30 000 рублей в месяц. Главное найти хорошего клиента и знать кое-какие нюансы, позволяющие увеличить количество кликов по картинке.

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

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