Блог Натальи Жестковой

Добрый день, дорогой друг!

Вопрос горячий, судя по ключевым запросам в Вордстате Яндекс. Как самому сделать баннер, как привязать картинку к ссылке, как вставить баннер на сайт…  Условно эти запросы можно разделить на две группы: как сделать баннер и как разместить баннер.

У первой группы есть только ссылка на сайт (прямая или партнерская), картинки нет и как их соединить на сайте они не знают. Картинку надо подготовить, как вы понимаете. Найти подходящую и отредактировать в Фотошоп или другом фото-редакторе. Как минимум изменить или вставить текст, какой нужен Вам.

У второй группы есть и ссылка и готовая картинка – два главных элемента баннера. Надо только  соединить их при помощи третьего элемента баннера – html-кода.

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

1.Создаем файл в «Блокноте», вставляем туда шаблон кода

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

2.Вместо слов встраиваемая ссылка вставляем ту ссылку, по которой будет переходить посетитель, кликнув по баннеру (прямая или партнерская ссылка на какой-либо сайт). Ковычки остаются на месте!  Сохраняем, сворачиваем блокнот.

У меня код получился такой (я  даю ссылку на свою подписную):

<a href="http://nzh-2.ru"rel="nofollow" target="_blank"
><img src="Путь к картинке"/></a>

3.Заходим в панель управления (консоль) нашего сайта, на котором будет размещен  баннер. Выбираем «Медиафайлы», загружаем туда подготовленную картинку. Кликаем по ней, справа в Настройках задаем все нужные параметры (особое внимание размеру. Ширина картинки должна соответствовать ширине той колонки сайта, где будет размещена. У меня правая боковая колонка имеет ширину 300 пикселей, такую ширину я и задала своей картинке. Высота выставляется автоматически, пропорционально. Внизу кнопка Сохранить!

4.Копируем тут же в настройках URL-адрес картинки. Вставляем этот адрес вместо слов Путь к картинке в наш html-код в блокноте. Ковычки остаются на месте! Вот что получилось у меня:

<a href="http://nzh-2.ru"rel="nofollow" target="_blank"><img src="http://nzhestkova
.ru/wp-content/uploads/2017/10/3D-e1509261862537.jpg"/></a>

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

5.Переходим в панели управления в раздел Внешний вид, Виджеты. Наверху нажимаем «Перейти к визуальной настройке».

6.Слева у нас  уже настроенные виджеты. Внизу нажимаем  Добавить виджет . Выбираем в выпавшем меню блок html-код, блок добавляется в левую колонку. Простым перетаскиванием перемещаем его в то место в колонке, где будет располагаться наш баннер (по Вашему желанию),  кликаем по блоку, он раскрывается, и мы можем ввести  какое-то название для виджета (я этого не делала), и теперь главное —  в поле Содержимое  вставляем наш готовый html-код, скопированный из блокнота. Просто кликаем правой кнопкой мыши по полю и выбираем «вставить».

7.Сохранить. Обновить. Всё. Мы видим, что баннер на том месте, где мы и хотели. Если Вы кликните по нему, совершиться переход по той ссылке, которую Вы вставили в html-код.

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

9.Если Ваш баннер по ширине окажется меньше ширины колонки и «прилипнет» к одному краю колонки, нажмите в Визуальной настройке по соответствующему блоку html-код, и непосредственно в окне содержимое добавьте вначале и в конце html-кода элементы <center> и </center>

<center><a href="http://nzh-2.ru"rel="nofollow" target="_blank"
><img src="http://nzhestkova .ru/wp-content/uploads/2017/10/3D-e1509261862537.jpg"/
></a></center>

«Обновить». Если  баннер  теперь по  центру ширины колонки, «сохранить».  Вот и всё. ) Баннер для моей первой книжки готов — кликайте!

Искренняя благодарность Виктории Карповой за помощь в подготовке статьи.

С уважением, Наталья Жесткова

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