Вопрос горячий, судя по ключевым запросам в Вордстате Яндекс. Как самому сделать баннер, как привязать картинку к ссылке, как вставить баннер на сайт… Условно эти запросы можно разделить на две группы: как сделать баннер и как разместить баннер.
У первой группы есть только ссылка на сайт (прямая или партнерская), картинки нет и как их соединить на сайте они не знают. Картинку надо подготовить, как вы понимаете. Найти подходящую и отредактировать в Фотошоп или другом фото-редакторе. Как минимум изменить или вставить текст, какой нужен Вам.
У второй группы есть и ссылка и готовая картинка – два главных элемента баннера. Надо только соединить их при помощи третьего элемента баннера – 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>
«Обновить». Если баннер теперь по центру ширины колонки, «сохранить». Вот и всё. ) Баннер для моей первой книжки готов — кликайте!
Искренняя благодарность Виктории Карповой за помощь в подготовке статьи.
С уважением, Наталья Жесткова
Спасибо, что поделились статьей в социальных сетях!
Даже специалистом быть не нужно, прочитал и сделал себе 🙂
Самый быстрый и надежный способ сделать баннер самому и бесплатно, спасибо !
Радостно, что помогла.)