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

Доброго дня, друзья.

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

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

Что такое баннер? Баннер – это статическое или анимационное изображение, которое располагается в сайтбаре, шапке или подвале сайте, иногда прямо в статьях сайта.

Что нужно, чтобы разместить баннер?

Вам понадобятся:

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

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

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

Что нам потребуется?

Первое, что нам потребуется – это партнерская ссылка.

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

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

Второе, что будет нужно – это изображение. Я брал все уже готовое. На третьем дне обучения школы «Я Блогер» есть ссылка «Скачать 3 комплекта баннеров для рекламы».

 

Скачал данный комплект на компьютер и далее извлек из архива.

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

Папку открыл.

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

Появилось три варианта папок, где есть различные баннеры. Я взял баннер из Вариант 2 Стандарт.

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

Здесь есть различные виды баннеров. Я выбрал

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

Третье, что понадобится – это специальный код.

Такой специальный код также есть в третьем  дне обучения школы «Я Блогер»

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

Нужно выделить этот шаблон и скопировать:

<a href=»Ваша партнерская ссылка» rel=»nofollow» target=»_blank»><img src=»Путь к картинке»/></a>

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

Вставил его в «Блокнот» и далее редактировал.

Чтобы его отредактировать, нужно было в этот код добавить партнерскую ссылку.

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

Добавить ссылку на «путь к картинке».

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

Свою партнерскую ссылку я брал в партнерском кабинете Евгения Вергуса, найдя там продукт под названием «Бесплатная онлайн – школа «Я Блогер» длинная подписная страница».

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

Ставил свою партнерскую ссылку в специальный код, где написано «Ваша партнерская ссылка». Удалил слова Ваша партнерская ссылка и вставлял свою партнерскую ссылку строго между кавычками.

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

Далее, добавлял «Путь к картинке».

Для этого, зашел на свой сайт «Доходная сеть» в панель управления. Нашел вкладку «Медиафайлы».

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

Нажал на «Добавить новый» и далее «Выберите файлы».

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

Нажал «Открыть».

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

После загрузки картинки увидел в строчке URL свой «Путь к картинке».

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

Выделил этот URL и скопировал.

Далее, вставил этот URL в специальный код строго в  кавычки, удалив слова – Путь к картинке.

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

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

Зашел на свой сайт во вкладку «Внешний вид» и «Виджеты».

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

Добавил новый виджет.

Сделал это в панели управления при помощи «Перейти к визуальной настройке».

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

Зашел на вкладку «Виджеты» и выбрал Sidebar. Нажал на «Добавить виджет».

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

Далее, выбрал HTML – код.

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

В поле «Содержимое» вставил подготовленный код баннера. Нажал «Сохранить и опубликовать».

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

На моем сайте появился баннер бесплатной школы «Я Блогер».

Надеюсь, что данная статья будет кому – то полезна.

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

С уважением, Андрей.

Спасибо Вам за то, что поделились статьей в социальных сетях!
Вконтакте
Телеграм
Google
Подпишитесь на обновления блога:
Рекомендую ознакомиться с похожими статьями:

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

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