Як розмістити банер на сайті

1. Що таке банер і навіщо він потрібен.
2. Види і способи вставки банерів.
3. Підготовка коду банера.
4. Як вставити банер на сайт.

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

Що таке банер і навіщо він потрібен.

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

Ви можете самостійно створити банер, намалювавши його в будь-якому графічному редакторі (paint, fhotoshop і інші). Якщо ви рекламуєте партнерський продукт, то зазвичай рекламодавець надає готові банера з вашої реферального посиланням.

Перед розміщенням банерної реклами необхідно дотримуватися ряду рекомендацій:

1. Не бажано розміщувати банер на молодому сайті з відвідуваністю менше 300 чоловік в день. Пошукові системи негативно ставляться до молодих сайтам з великою кількістю реклами. Вони сприймають його як проект, створений виключно для заробітку, а не для людей. Пошуковики накладають різного роду санкції на такий ресурс і знижують його у видачі. Який сенс розміщувати рекламу, на сайті з відвідуваністю кілька десятків людей на добу? Віддачі від такої реклами не буде, а нашкодити своєму ресурсу можна.
2. Не треба робити і встановлювати блоки в яскравих, отруйних кольорах. Такі зображення дратують користувачів, зменшують кількість переходів по рекламі і загальний час перебування на сайті. Що, як ви розумієте, різко погіршує поведінкові фактори і дохід з банерної реклами. Намагайтеся вибирати чіткі, інформативні, зрозумілі зображення з квітами придатними під загальний дизайн вашого ресурсу.
3. Бажано, щоб банер відповідав тематиці вашого ресурсу. Погодьтеся, смішно виглядає реклама ремонту автомобілів, на сайті присвяченому кулінарії! Та й який сенс переходити відвідувачеві кулінарного сайту з даного банеру, якщо його цікавлять виключно кулінарні рецепти.

Види і способи вставки банерів.

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

Основні розміри банерів

Також банери можна розділити на статичні (графічні) і на динамічні (анімовані).

Графічний банер являє собою звичайну картинку з векторним або растровим зображенням. Це може бути фотографія, малюнок, текст і інше.

Подивіться як він виглядає.

Анімований містить рухливу картинку із застосуванням flash технології.
Зазвичай, установка таких банерів, не складає проблем і полягає в розміщенні простого коду в потрібному місці сайту. Іноді, буває необхідно, щоб в одному місці показувалося кілька банерів, які циклічно змінюються між собою. Для створення такої демонстрації застосовуються спеціальні скрипти, які називаються ротаторами ( "крутилками") банерів, вони дозволяють показувати різні зображення в певному порядку.

Підготовка коду банера.

Основні місця установки рекламних блоків, це сайдбар і безпосередньо в тексті статті. Іноді встановлюють в шапку сайту або в підвалі.

Для цього знадобиться найпростіший код.

<A target = "_blank" rel = "nofollow" href = http: // ваше посилання на рекламований сайт />

<Img alt = "тут ваш текст" src = "http: // шлях до картинки" width = "240" height = "400" />

Давайте розберемо що тут і навіщо:

• target = "_ blank" - атрибут вказує на відкриття посилання провідною з банера в новому вікні. Відвідувач переходячи за цим посиланням, не покидає ваш сайт назавжди, що позитивно впливає на поведінкові фактори;
• rel = "nofollow" - атрибут для закриття посилання від індексації пошуковими системами. Допомагає захистити ваш сайт від перерозподілу ваги на сторонній ресурс.
• http: // ваше посилання на рекламований сайт / - це посилання на сайт, який ви рекламуєте і на який повинен перейти відвідувач після кліка по рекламі.
• Alt "тут ваш текст" - цей тег бажано завжди заповнювати для зображень. Показує замість зображення альтернативний текст, в разі, коли у користувача відключений в браузері показ картинок. Так само не буде помилки при перевірці валідації.
• "Http: // шлях до картинки" - адреса картинки банера на хостингу. Для перевірки можете ввести це посилання в адресному рядку браузера і ви повинні побачити у видачі картинку банера. Якщо шлях вказано невірно, отримаєте відповідь "помилка 404".
• width = "240" і height = "400" - відповідно розмір по ширині і висоті банера. Краще вказати ці параметри для прискорення завантаження. Ви можете самостійно змінювати ці параметри для зміни розміру зображення.

Давайте згадаємо, де взяти адресу картинки банера. В адмін панелі управління сайтом заходите в розділ «Медіафайли» (1) => «Додати новий» (2) і вибираєте файл з картинкою банера на вашому комп'ютері. Завантажуєте його на хостинг.

Далі клікаєте по завантаженої картинці (1) і справа копіюєте її адресу (2).

Вставляєте скопійований адресу картинки в свій код замість = "http: // шлях до картинки". В результаті вийшов наступний код.

<A target = "_blank" rel = "nofollow" href = "https://ya-blogger.ru/free/?=svoidoxod"> <img src = "https://sergeyneznamov.ru/wp-content/uploads /2017/02/468h60.gif "width =" 468 "height =" 60 "> </ a>

На цьому підготовка коду завершена залишилося тільки його вставити на сайт.

Як вставити банер на сайт.

Для вставки банера до статті, вибираєте місце де він повинен відображатися. В текстовому редакторі перемикаєтеся з візуального режиму на вкладку «Текст», вставляєте створений вами код в потрібне місце. Назад переходите на вкладку «візуально», банер повинен з'явитися в тілі статті.

Для розміщення банера в сайдбарі, в адмін панелі управління сайтом переходите в розділ «Зовнішній вигляд» (1) => «Віджети» (2), вибираєте зліва віджет «Текст» (3) і перетаскуєте його в те місце де він повинен відображатися в сайдбарі. В поле «Назва» (4), можна написати рекламний заголовок або залишити порожнім. В поле «Текст» (5) вставляєте заздалегідь скопійований код вашого банера.

Збережіть зміни і перейдіть на сайт, банер повинен відображатися в сайдбарі.

Для вирівнювання позиції банера в статті і в сайдбарі доповнюємо код.

Для вирівнювання по центру

<Center <a target = "_blank" rel = "nofollow" href = http: // ваше посилання на рекламований сайт />

<Img alt = "тут ваш текст" src = "http: // шлях до картинки" width = "240" height = "400" /> </ center

Якщо зображення притискається до якого-небудь елементу знизився, робимо нижній відступ кілька пікселів (для прикладу задано 10 px.)

<Div style = "margin-bottom: 10px <a target =" _blank "rel =" nofollow "href = http: // ваше посилання на рекламований сайт /> <img alt =" здесьваштекст "src =" http: // шлях до картинки "width =" 240 "height =" 400 "/> </ div>

Якщо картинка наїжджає зверху, робимо верхній відступ (також задано 10 px).

<Div style = "margin-top: 10px"> <a target = "_blank" rel = "nofollow" href = http: // ваше посилання на рекламований сайт /> <img alt = "тут ваш текст" src = "https : // шлях до картинки "width =" 240 "height =" 400 "/> </ div>

Якщо щось не зрозуміло, дивіться пояснює відео.

Як ви зрозуміли, нічого складного немає. Тепер ви знаєте як розмістити банер на сайті. Всім всього доброго!