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

Добавление картинки (баннера) на сайт

Прежде, чем добавить картинку в HTML-страницу, необходимо загрузить ее на сайт и скопировать путь.

Делается это следующим образом (я буду показывать на примере своего сайта на движке wordpress): в левом меню найдите раздел Медиафайлы – Добавить новый. Из папки на вашем компьютере выберите ту картинку, которую хотите установить в HTML-страницу. Скорей всего это будет баннер.

Следующим шагом в параметрах файла скопируйте полностью URL картинки. Чтобы не потерять, вставьте эту ссылочку в Блокнот.

установить картинку в HTML-страницу сайта

Код для добавления картинки в HTML-страницу сайта

Для того, чтобы установить картинку в HTML-страницу, необходимо воспользоваться специальным кодом.

Самый простой код имеет следующий вид <img src=”…”>

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

<img src=”https://denezhnye-ruchejki.ru/wp-сontent/uploads/2017/05/aban_728x90_adman.gif”>

Недостаток данного кода в том, что картинка не кликабельна и не несет функциональной нагрузки. Но если вам нужно просто добавить изображение, то этот код идеально для вас подойдет.

Код для добавления картинки в HTML-страницу сайта с реферальной ссылкой

Мне же на моем сайте хотелось сделать так, чтобы картинка (баннер) был кликабелен и вел на другой сайт при чем по моей реферальной ссылке, и чтобы все открывалось в новом окне.

Для этого есть еще один код, и вот как он выглядит:

<div><a href="рефссылка" target="_blank" rel="nofollow"><img src="ссылка на картинку"></a></div>

Команда target=»_blank» отвечает за то, что ссылка будет открываться в новой вкладке.

Пример кода, который установлен на моем сайте:

<div><a href=»http://surfearner.net/785063″ target=»_blank» rel=»nofollow»><img src=»https://denezhnye-ruchejki.ru/wp-content/uploads/2017/05/aban_728x90_adman.gif»></a></div>

Где http://surfearner.net/785063 — это реферальная ссылка, которая ведет на новый сайт,

https://denezhnye—ruchejki.ru/wp—content/uploads/2017/05/aban_728x90_adman.gif — это ссылка на загруженную картинку.

Как видите, все очень просто — главное, верно скопировать и вставить код на сайт.

Куда добавить код картинки на сайт

Давайте теперь разберем, куда вышеупомянутый код нужно вставить, чтобы картинка корректно отображалась и работала.

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

В моем случае  установить картинку в HTML-страницу сайта с рефссылкой я хотела вверху каждой статьи. Это можно сделать, вставив код через Внешний вид – Редактор в раздел Отдельная запись (single.php).

single.php

На скриншоте видно то место, куда я установила данный код.

код картинки для html-страницы

На сайте кликабельный баннер теперь отображается над статьями так, как я и хотела.

пример

Зачем кликабельные картинки на сайте

Возможно, у новичков может возникнуть такой вопрос: а зачем устанавливать кликабельные картинки на сайт?

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

Вывод

Установить картинку в HTML-страницу сайта с реферальной ссылкой очень просто. Я не программист, и все-таки сделала это буквально за пару минут. В статье я постаралась описать весь подробный процесс, поэтому уверена, что и у вас все получится!

Денежные ручейки