<
  • Главная
Статьи

Як зробити банер і створити його код?

Як зробити банер і створити його код?

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

Що таке банер і як розмістити готовий банер на сайті розглянуто раніше в статті «Розміщення банера». Тут же ми розглянемо коротко з посиланнями на інші ресурси сам процес виготовлення, а також докладніше, що викликає труднощі у початківців, створення коду банера для вставки на сайт.

Процес створення банера починається з малювання картинки. Якщо Вам потрібен статичний банер, то достатньо однієї картинки, якщо Вам подобається анімований банер, то малюється стільки картинок, скільки потрібно для якісного процесу анімації. Якщо у Вас виникають труднощі з роботою в програмі фотошоп, можна скористатися більш простий програмою онлайн сервісу «Photo editor online» (малюнок 1, ). Є він сильно спрощеним варіантом фотошопа, але іноді для створення простої картинки цілком достатній. Для входу досить натиснути назву сервісу «Photo editor online».

Для входу досить натиснути назву сервісу   «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).

Для цього заходимо в адмін панель сайту на движку WordPress, в консолі знаходимо «Медіафайли» à «Додати новий» і натискаємо «Додати новий» (малюнок 3)

Малюнок 3. Консоль сайту

У вікні (малюнок 4) натискаємо кнопку «Виберіть файл». Вибираємо файл з створеної і збереженою у себе на компьюторе картинкою. У віконці (рисунок 5) з'являється назва обраної картинки. Натискаємо активується при натисканні кнопки «Завантажити» і відкривається вікно «Бібліотека файлів» (малюнок 6).

Натискаємо активується при натисканні кнопки «Завантажити» і відкривається вікно «Бібліотека файлів» (малюнок 6)

Малюнок 4. Вікно вибору нового медіафайлу

Вікно вибору нового медіафайлу

Малюнок 5. Віконце завантаження нового медіафайлу

Віконце завантаження нового медіафайлу

Малюнок 6. Вікно «Бібліотека файлів»

Далі клацаємо по картинці нашого файлу - відкривається вікно «Змінити мультимедійний» (малюнок 7). У цьому вікні бачимо посилання на файл з нашою картинкою.

У цьому вікні бачимо посилання на файл з нашою картинкою

Малюнок 7. Вікно «Змінити мультимедійний з необхідною посиланням на нашу картинку

Створення коду банера

Відразу скажу, що не раджу новачкам створювати код самим, наприклад, як показано на ресурсі Марії Ріш. Справа ця тонка, вимагає уважності і певних навичок. Відсотків 99, що у Вас не скоро вийде. Зрештою, наша мета - заробляти гроші, а не вивчати мову HTML. Тому, заходимо на чудовий сервіс http://webanet.ucoz.ru/index/0-14 , Натискаємо «Генератор HTML коду банерів і кнопок» і заповнюємо поля у вікні (малюнок 8).

Малюнок 8. Вікно генератора HTML коду банерів і кнопок сервісу WEB.A.NET

Введення даних зазвичай утруднень не викликає. Єдине, в поля «Ширина і висота банера» значення потрібно вводити в пікселях. Після заповнення полів натискаємо кнопку «Згенерувати код» і в віконці «Скопіюйте готовий код з цієї форми» отримуємо готовий код для вставки в наш сайт бар. Ще раз нагадаю, що процес розміщення банера (вставки коду) докладно наведено в статті «Розміщення банера». У цьому вікні бачимо посилання на файл з нашою картинкою. Після вставки коду в нашому сайт барі бачимо, наприклад, таку картинку (малюнок 9). При натисканні на картинку, відкривається сторінка підписки на безкоштовну книгу «Сайт сам створю». Спробуйте! У той же час можна не натискаючи на картинку ввести свої ім'я та E - mail в форму внизу і отримати безкоштовну книгу, натиснувши на кнопку «Отримати». Спробуйте!

Запрошую приєднатися:

Схожі статті

Як зробити банер і створити його код?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

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

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

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

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

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью