bonuswm.org - сервис раздачи бонусов webmoney

Простой код баннера

Как создать простой код баннера

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

Создадим простой код баннера

Первым делом, необходимо загрузить изображение в определённую папку, например «images», или создать любую другую, где будут храниться наши изображения для рекламы. Затем грузим туда картинки популярных форматов (jpg, gif, png).  Теперь в блокноте напишем путь для нашей картинки.

<img class=”aligncenter size-full wp-image-1057″ src=”https://web-master-aleksej-zimin.ru/wp-content/uploads/2020/02/2020-02-15_13h23_21.png” alt=”” width=”468″ height=”60″ />

В этом коде говорится следующее. Тег <img> заявляет браузеру, что данный элемент картинка, или изображения. Далее атрибут «srс» указывает путь к этому изображению. Затем идёт сам путь, это адрес сайта, папка «uploads» и непосредственно сам файл, который я назвал «banner_sitestroy» расширением «gif». После всего этого закрываем действие атрибута <img> вот таким образом « />».  Теперь необходимо указать следующее: ширину баннера (width), высоту баннера (height), альтернативный текст (alt=), текст при наведении, на изображение (title=) и поставить нулевое значение для бордюра (border=”0″), что бы он случайно не появился в некоторых браузерах.

<a href=”https://web-master-aleksej-zimin.ru/” target=”_blank” rel=”noopener”><img class=”aligncenter wp-image-1057 size-full” src=”https://web-master-aleksej-zimin.ru/wp-content/uploads/2020/02/2020-02-15_13h23_21.png” alt=”” width=”468″ height=”60″ /></a>

 

Получился вот такой, код и можем теперь открыть его в браузере и посмотреть, всё ли работает?

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

<a href=“https://web-master-aleksej-zimin.ru” target=“_blank”>

Здесь мы видим, тег <a>, который говорит браузеру, что это ссылка, далее атрибут «href» означающий начало пути ссылки, сама ссылка и завершает всю церемонию, тег «target» с атрибутом «_blank», который откроет адрес партнера, в новой вкладке, не закрывая наш сайт. Весь этот код необходимо вставить перед кодом, картинки, а после её вставить закрывающий тег ссылки </a>. В общем, что бы получилось вот так.

<p style=”text-align: justify;”><a href=”https://web-master-aleksej-zimin.ru/” target=”_blank” rel=”noopener noreferrer”><img class=”wp-image-1056 size-full alignleft” src=”https://web-master-aleksej-zimin.ru/wp-content/uploads/2020/02/web-master.gif” alt=”” width=”468″ height=”60″ /></a></p>

В общем, это готовый код для баннера 468х60, который можно скопировать, вставить реальные данные и он готов. Для баннеров других размеров, просто поменяйте значение «width» (ширина) и height (высота).

Пример баннера который должен получиться 

 

 

Автор

admin

Комментарии:

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.