Как сделать кликабельный баннер, кнопку для сайта

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

1. Создаем баннер

Это может быть любая картинка с текстом, анимированный баннер или кнопка.  Обязательно нужно учесть размер баннера, т.е нужно заранее знать то месть где он будет размещен. Если это сайт-бар, то его размеры можно уточнить с помощью «просмотра кода элемента», либо используя линейку. Я использую расширение Google под названием Далее создаем в Photoshop новый документ с интересующими нас размерами и делаем красивый яркий баннер.

2. Загружаем в медиафайлы

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

3. Добавляем код

Код можно вставить в любое место вашего сайта. Допустим мы добавляем код в сайтбар. Для этого заходим во Внешний вид — виджеты и выбираем текст. В это окошко мы и добавляем код со ссылками.

<a href=»адрес ссылки»><img src=»путь к картинке»/></a>

  • Адрес ссылки

Адрес ссылки — это та страница, куда вы хотите направить посетителя, после того как он кликнет на баннер (кнопку). Откройте нужную страницу, скопируйте полностью ссылку из адресной строки и вставите в код вместо слов «адрес ссылки«

  • Путь к картинке

Путь к картинке — это ссылка на то изображение, которое будет видно посетителю, баннер или кнопка. Откройте изображение в медиафайлах своего сайте, скопируйте ссылку и вставьте вместо слов «путь к картинке».

Внимание: при копировании внимательно следите, чтобы ни один элемент кода не изменился. Ссылки должны быть заключены в кавычки.


Как сделать кликабельный баннер, кнопку для сайта: 1 комментарий

  1. Что происходит с сайтом если не писать статьи Отфотошопь:

    […] Как сделать баннер кликабельным Допустим вам нужно разместить на своем сайте баннер, кликнув на который, пользователь может перейти на другой сайт, либо страницу. Дело это не хитрое, даже не смотря на то, что для этого нужно использовать код. 1. Создаем баннер Это может быть любая картинка с текстом, анимированный баннер или кнопка.  Обязательно нужно учесть… […]

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

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