Как разместить баннер на сайте

Как разместить баннер на сайте

Здравствуйте! Сегодня решила зафиксировать свои знания о том, как разместить баннер на сайте. Периодически я занимаюсь внешним видом своего сайта: заменяю какие-то баннеры, уже примелькавшиеся читателям, добавляю новые. Чтобы не “лазать” по разным папочкам на компьютере, я захотела собрать всю информацию по этому вопросу в одном месте: в этой статье на своём блоге. Думаю, кому-то эта информация тоже будет полезна.

СОДЕРЖАНИЕ

Что такое баннер для сайта

Код баннера для сайта

Размещение баннера в статье на сайте

Размещение баннера в сайдбаре

Видео: как разместить баннер на сайте

Заключение

Что такое баннер для сайта

Баннер для сайта – это некая картинка со встроенной в неё ссылкой. Таким образом, при клике по ней пользователь попадает на другой сайт.

Основная функция баннера – рекламная. Цель размещения баннера на сайте – привлечение внимания читателя, который кликнет по баннеру, если указанная на нём информация ему интересна.

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

О том, как еще можно зарабатывать на блогах в интернете, я писала в этой статье.

Код баннера для сайта

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

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

<center><a href=”ВАША ССЫЛКА”rel=”nofollow” target=”_blank”><img src=”ПУТЬ К КАРТИНКЕ”/></a></center>

Скопируйте этот код и вставьте в любой текстовый редактор (в блокнот, например).

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

<a href=”ВАША ССЫЛКА”rel=”nofollow” target=”_blank”><img src=”ПУТЬ К КАРТИНКЕ”/></a>

В этом коде необходимо сделать замену в двух местах, где заглавными буквами написано: ВАША ССЫЛКА и ПУТЬ К КАРТИНКЕ.

Размещение баннера в статье на сайте

До сегодняшнего момента на моём блоге не было баннеров, располагавшихся прямо в статьях. Они находились только в сайдбаре (в боковой колонке справа). Сейчас буду исправлять ситуацию и одновременно описывать алгоритм своих действий. Хочу разместить в этой статье баннер, ведущий на мою группу ВКонтакте.

Путь к картинке

Сначала я получу адрес пути к картинке. Для этого загружу подготовленную заранее картинку на свой блог. Картинка для статьи имеет размер 468*60 пикселей и сделана мной в программе Canva (о том, как я делаю там картинки, планирую написать в одной из следующих статей). Загрузка картинки происходит следующим образом.

  • В админ-панели сайта слева нажимаю “Медиафайлы”, затем “Библиотека”:

Как разместить баннер на сайте

  • В открывшемся окне кликаю по словам “Добавить новый”, нажимаю кнопку “Выберите файлы” и нахожу на своём компьютере тот файл с картинкой, который хочу вставить на блог. Либо можно открыть окошко проводника, в котором видно, где сохранён нужный файл на компьютере, и из этого окошка перетащить файл левой кнопкой мыши прямо в поле, ограниченное штрих-пунктиром (см. скриншот ниже):

Как разместить баннер на блоге

  • Проверяю в поле справа, чтобы название картинки было написано латинскими буквами с подчеркиванием или дефисами между словами (корректирую при необходимости), заполняю ячейки “Атрибут Alt” и “Описание” (так я делаю для всех загружаемых на сайт картинок):

Баннер на сайте

  • В ячейке URL автоматически прописывается адрес, по которому загружена картинка (отмечено красной стрелкой выше). Это и есть ПУТЬ К КАРТИНКЕ, который я копирую (кликнув 3 раза мышкой по адресу) и вставляю в код баннера в блокноте вместо соответствующих слов:

Размещение баннера на сайте

Ваша ссылка

Захожу во ВКонтакте в свою группу, посвященную вопросам получения дохода в сети интернет, копирую ссылку на неё и вставляю в код баннера в блокноте вместо слов ВАША ССЫЛКА:

Разместить баннер

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

Баннер на блоге

На скриншоте плохо видно, но я поясню: стрелочка сверху указывает на вкладку “Текст”, а снизу – на то место, где стоит курсор. У меня на блоге это место обозначается так: &nbsp;

Еще можно во вкладке “Визуально” в том месте, где находится курсор, поставить какие-нибудь отличительные знаки (например, много цифр “5”), чтобы без труда определить это место во вкладке “Текст” и вставить вместо этих цифр подготовленный код баннера.

Вставляю код, полученный выше,  и получаю вот такой баннер:


Размещение баннера в сайдбаре

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

Для начала я проделала все действия с картинкой, описанные выше (картинку загружала, конечно, другую, т.к. баннер в сайдбаре будет другой). Размер картинки – 240*400 пикселей.

Затем вставила в код баннера свою партнёрскую ссылку на бесплатный учебник по копирайтингу.

Далее в админ-панели нажала “Внешний вид”, затем “Виджеты” и перетащила виджет “HTML-код” из левого поля в боковую панель между виджетами “Рубрики” и “Свежие записи”. В открывшуюся ячейку “Содержимое” вставила подготовленный для баннера код и сохранила изменения:

Размещение баннера в сайдбаре

В результате таких действий на моём блоге в колонке справа после блока “Рубрики” появился такой баннер:

Баннер

Видео: как разместить баннер на сайте

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

Заключение

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

С уважением, Юлия.

Спасибо, что поделились статьёй в социальных сетях!


 

17 комментариев

  1. Спасибо, Юля! Все замечательно написано. Даже с видео! Одно плохо. То ли у меня совсем динамик слабый, то ли уши с возрастом подувяли. 🙂 На максимальной громкости я еле различал голос. А за статью еще раз спасибо!

    1. Здравствуйте! С ушами, я думаю, всё в порядке, не наговаривайте на себя:-) Это мне надо громче говорить в следующий раз:-). Это первое моё видео на моём канале в ютубе. Ох, и намаялась я с ним:-) Первый блин, как говорится, не судите строго:-). Без видео статья была бы уже давно готова. Осваиваю новое, неизведанное:-), продолжаю учиться.
      Хотя у меня на компьютере и на телефоне всё достаточно хорошо слышно, особенно если прибавить звук. Может, динамики у Вас, действительно, слабоваты. Посмотрим, как другим будет: слышно или нет.
      Спасибо Вам за комментарий!

      1. Доброе время суток Юлия! Поздравляю Вас с “первым блином”!))… а у кого он не комом то?
        Смотрела это видео на Ютуб, действительно очень плохо слышно (я даже комментарий там оставила по этому поводу), перешла сюда (на сайт) и изучаю информацию здесь.
        Я хочу поставить на сайт анимированный баннер. Сам баннер уже готов, но на том видео-уроке, который я смотрела (и делала) нет информации по его установке. Попробую воспользоваться Вашим уроком.
        Спасибо!
        P.S. Кстати, в где смайлики на комментарии? Хотела поставить (после блина* ха-ха)), но не нашла их…

        1. Здравствуйте! Со смайликами в комментариях ещё не разобралась:-( Если напишете, как это сделать, буду благодарна.

  2. Юля! Прекрасная статья. Не надо теперь рыться в записях и искать этот материал. Помню, была в полном восторге, когда баннер установила по центру. Жду новых статей. Особенно про Канву. Успехов. Да, у тебя картинки индивидуальные.
    Звук на видео хотелось бы погромче.

  3. Написали подробную инструкцию, человеческим языком. А что касается видео, то начинать с чего-то надо,первый блин не совсем комом, но звук немного подкачал.

  4. Как же все это было давно у меня с баннером: руки тряслись, недописала символ, баннера нет, потом по новой, баннер вбок ушел – не отцентровала, в поисковую бегом) Неужели столько времени прошло? Спасибо Юлия! Отличный пост, да еще с видео. А по поводу громкости у меня нормально, хотя ноутбук с 2010 года. Дерзайте Юля, все супер у Вас и все получается!

  5. Юля! Всё сделала пошагово как и написано в Вашей статье. Но, у меня картинка отобразилась пустым квадратом – картинка анимированная (в формате gif). И в медиафайлах и на хостинге картинка отображается корректно, но на сайте почему-то не хочет правильно отображаться))). Понимаю, что с этим форматом баннер вставляется также, но, может есть какая-то фишка во вставке анимированного баннера? Или мне нужно обратить внимание на что-то другое?

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *