Как сделать картинку ссылкой буквально за минуту

Как сделать картинку ссылкой в html на сайте

как сделать картинку ссылкой

Добрый день. Примерно год назад, я написал статью: — «Как сделать флешь баннер?». В данной статье я решил продолжить эту тему, но в более простом виде. Поговорим мы не про создание баннера, а просто о том, как сделать картинку ссылкой. Например, картинка вверху является ссылкой, ведущей на мой партнерский курс «Как снять фильм». Можете кликнуть, и убедиться, как это работает!

Зачем нужно делать из картинки ссылку

а) К примеру, у вас имеется красивая картиночка замечательного товара. Вы создаете из нее ссылку, вставляете её на определенный ресурс. Человек заходит на данный сайт, видит картинку, кликает по ней, и попадает в интернет-магазин, где находится этот товар!

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

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

Достаточно скопировать изображения его товара, поместить скриншот на сайт, а картинку сделать ссылкой. Это будет чем-то вроде баннера, но с меньшей нагрузкой на сайт. На мой взгляд, очень удобно и красиво. Тем более, если вы красиво рисуете (или знаете того, кто может вам красиво нарисовать определенный баннер). Делаете из этой картинки баннера ссылку и опять-таки кликабельность по данной картинке баннеру повышается.

в) Третья причина, похожа на вторую. Я думаю, что не открою вам секрет, что из-за баннеров значительно повышается нагрузка на сайт. Ведь что такое чужой баннер на вашем сайте?

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

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

Партнёрская программа - комиссия 50%

Ускоритель Компьютера

Как только я удалил данный баннер, мой блог стал загружаться в разы быстрее (сайт начал загружаться за 1.5 секунды, а не за 50!)! То есть, можно создать скриншот данного баннера, в скриншот вставить ссылочку и время его загрузки будет не несколько секунд, а доли секунды! Хотя, конечно, не так красиво. Он не будет меняться, но время загрузки сайта дороже!

г) Я думаю, что не удивлю веб. мастеров, если скажу, что часть ваших баннеров пользователи элементарно не видят. В браузерах таких людей стоит расширение «Анти-блок» или «Adguard». Данные расширения элементарно блокируют рекламу. В том числе и часть баннеров.

Если же у вас будет стоять картинка ссылка, анти блок подобный баннер воспримет воспринимать как обычное изображение, и ни какой блокировки. Например, у меня стоял определенное время баннер «живые картинки», но по нему было мало кликов. Я в начале не понимал в чем дело, потом увидел, что «Adguard» его просто блокирует.

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

как создавать живые фотографии

д) Еще одной причиной, почему лучше сделать из баннера просто картинку, я бы назвал то, что поисковики, особенно Гугл, не любят, когда много рекламы на сайте. А вашу картинку ссылку, они станут воспринимать, просто как еще одно изображение, а не как рекламу. Удобно? Думаю, да! Но, давайте вернемся к сути нашего вопроса.

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

Делается это довольно просто. Я приведу конструкцию подобного изображения со ссылкой:

<a href="адрес ссылочки"><img src="адрес изображения" alt="" /></a>

В адрес ссылки вставляем ссылочку полностью, причем с http:// и прочими вещами (хотя это не всегда обязательно, но не заморачивайтесь по данному поводу). Тоже относится и к адресу изображения.

Как узнать адрес вашего изображения? Щёлкните по нему мышкой и в новом окошке вверху вы увидите вашу ссылочку. Или, войдя в админ панель, выбираем «Медиафайлы» — «Библиотека» и просматриваете все ваши изображения на сайте.

живые фотографии

Находите нужное, кликаете по ссылке вверху, и просматриваете ссылочку.

ссылка на живые фотографии

Также, хочу добавить, что, если вы желаете, чтобы ваша картиночка открывалась в новой вкладке, желательно добавить target="_blank" в данный код.

Соответственно, наш код примет вид.

<href="адрес ссылочки" target="_blank"><img src=" адрес изображения " alt="" /></a>

Изображения на блогах чаще всего находятся в папках /wp-content/uploads/ или /images/.

По сути, приведенный выше код является готовым для вставки в ваши сайдбары. Можно его сделать по центру, поместив между тегами <center>...</center>, или кодом <p align="center">…</p>

Как видите, всё довольно просто.

Как сделать картинку ссылкой в тексте статьи

Это относится к сайтам на движках WordPress. Здесь все также довольно просто. Картинка уже загружена на ваш сайт. Вносим её в текст. Выделяем картиночку левой кнопочкой мышки. Далее, нажимаем на знак ссылки в верху «Визуальной панели».

картинка ссылка в админке

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

Если у вас есть другие способы, как сделать картинку ссылкой в html, буду рад, если вы их напишите в комментариях. Успехов!

С уважением,    Андрей Зимин!                      23.08.2015 г.

Анекдот:

а285

Советую прочитать:

Kategorie: Сайтостроение

ДОБАВЬТЕ КОММЕНТАРИЙ, ПОЛУЧИТЕ ПОДАРОК!подарок

12 комментариев

  1. Мария Царенок:

    Здравствуйте, Андрей!

    Актуальная статья. Очень многие люди не знают,

    как это сделать.

    Ответ для Мария
    • Андрей Зимин:

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

      Ответ для Андрей
  2. Андрей:

    Спасибо.Интересная статья,обязательно воспользуюсь :razz:

    Ответ для Андрей
    • Андрей Зимин:

      Я рад, что вам понравился данный метод!

      Ответ для Андрей
  3. Людмила Сатретдинова:

    Очень хорошая идея делать картинки с ссылкой. Написано понятно и доступно как это сделать Благодарю!

    Ответ для Людмила
    • Андрей Зимин:

      Спасибо, Людмила.

      Ответ для Андрей
  4. Анатолий:

    Полезный сайт, много интересного материала, нужного блоггерам.

    Ответ для Анатолий
    • Андрей Зимин:

      Спасибо Анатолий!

      Ответ для Андрей
  5. Александр Силиванов:

    Для того, чтобы сделать виджет с баннером в сайдбар, я проделываю следующее: Создаю новую запись в редакторе админки. Добавляю туда картинку (Добавить медиафайл). Перехожу в html-режим. Прописываю ссылку (со всеми атрибутами: nofollow (если требуется), target="_blank"). Сформировав код, открываю Виджеты — Текст — вставляю текст и устанавливаю виджет в сайдбар.

    А вообще существуют интересные способы, как не просто сделать картинку ссылкой, но и скрыть эту ссылку от поисковых систем. Для читателя она остается ссылкой и работает. А ПС за ссылку ее не считают.

    Ответ для Александр
    • Андрей Зимин:

      Данная ссылка скрывается под Goto. Я сейчас nofollow и noindex не использую, это прошлый век. Поисковики всё равно их читают! Вы мне подали идею, нужно будет написать статью, как скрывать ссылки через Goto. У меня также комментарии через них закрыты, и не только комментарии. Поисковики их не видят, но они отлично работают! :)

      Ответ для Андрей
      • Александр Силиванов:

        Не совсем согласен насчет nofollow. Если в коде страницы стоит мета-тег robots «noindex, nofollow», страница не индексируется. Так закрыты рубрики, теги, архивы. То-есть, директивы все же действуют. Другое дело, что по ссылке с nofollow «утекает» (правда, как я понимаю, не на конкретную страницу, а «в никуда»), статистический вес моей страницы.

        С Goto я дела не имел никогда. А чтобы скрыть «лишние» ссылки (правда, лишь в тексте статьи — где они могут быть как в виде картинок, кнопок, так и в текстовом виде — , а не в сайдбаре), использую так называемые ajax-ссылки. Это, конечно, требует редактирования файла функций, файла header и файла style.css. Но один раз настраиваешь — и никаких проблем.

        Сама «технология», конечно, не моя, а Виталия Кириллова (СЕО-Маяк).

        Комментарии, «дубли реплитуком» у меня тоже закрыты по его методам. Да и еще многое...

        А про Goto пишите — интересно!

        Ответ для Александр
  6. Aba:

    Крутая акция

    Ответ для Aba
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

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

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

Яндекс.Метрика
« align=»absmiddle
X

Привет дорогой друг!

У вас установлено расширение AdBlock или AdGuard. Добавьте, пожалуйста, мой сайт в белый список и тем самым, вы внесете свой вклад в его развитие. Спасибо за понимание! Инструкция как отключить AdBlock