Сайтостроение        23 августа 2015        8905         12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://livephoto.andgin.moviesecrets.e-autopay.com

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

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

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

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

<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>

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

Советую почитать: — Как заработать в интернете 36 способов и Как скачать музыку с ВК

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

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

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

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

Если вы любите работать с картинками, и другими графическими редакторами, предлагаю посмотреть мою статью: — ФотоШоу Про. Я думаю, вам будет интересно!

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

Друзья, если вы любите смотреть видео, я советую делать это на отличных мониторах. У меня стоит монитор 27 дюймов. В начале, он показался мне огромным, сейчас кажется обычным, даже средним. Но, факт в том, что смотреть компьютер с обычным монитором мне уже не привычно. Поэтому, я вам советую приобрести монитор на АлиЭкспресс ASUS VC279N. Дизайном, он похож на мой. Приобрести его можно по ссылке…. Очень удобная вещь (если судить по моему).

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

Вообще, вы можете зайти на страницу с мониторами, и выбрать понравившийся. Так мониторы с разным диаметром, ценой и производителем. Но, я вам рекомендую всё же взять один из них с диаметром 27 дюймов! Ссылка на мониторы… 27 дюймов, это отлично, можете не сомневаться, он у меня уже лет 7 и работает на 5+ !

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

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

Анекдот:

а285

ДОБАВЬТЕ КОММЕНТАРИЙ, ПОЛУЧИТЕ ОБРАТНЫЙ НА СВОЙ САЙТ!

Обсуждение: 12 комментариев
  1. Мария Царенок:

    Здравствуйте, Андрей!
    Актуальная статья. Очень многие люди не знают,
    как это сделать.

    Ответить
    1. Андрей Зимин:

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

      Ответить
  2. Андрей:

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

    Ответить
    1. Андрей Зимин:

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

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

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

    Ответить
    1. Андрей Зимин:

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

      Ответить
  4. Анатолий:

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

    Ответить
    1. Андрей Зимин:

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

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

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

    Ответить
    1. Андрей Зимин:

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

      Ответить
      1. Александр Силиванов:

        Не совсем согласен насчет nofollow. Если в коде страницы стоит мета-тег robots «noindex, nofollow», страница не индексируется. Так закрыты рубрики, теги, архивы. То-есть, директивы все же действуют. Другое дело, что по ссылке с nofollow «утекает» (правда, как я понимаю, не на конкретную страницу, а «в никуда»), статистический вес моей страницы.
        С Goto я дела не имел никогда. А чтобы скрыть «лишние» ссылки (правда, лишь в тексте статьи — где они могут быть как в виде картинок, кнопок, так и в текстовом виде -, а не в сайдбаре), использую так называемые ajax-ссылки. Это, конечно, требует редактирования файла функций, файла header и файла style.css. Но один раз настраиваешь — и никаких проблем.
        Сама «технология», конечно, не моя, а Виталия Кириллова (СЕО-Маяк).
        Комментарии, «дубли реплитуком» у меня тоже закрыты по его методам. Да и еще многое…
        А про Goto пишите — интересно!

        Ответить
  6. Aba:

    Крутая акция

    Ответить

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

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

https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Поиск Нужных Статей По Сайту:
Моя Группа в (Facebook) — Присоединяйтесь!

Самые Дешевые Цены На Все Товары!

Все товары

Моя Сестра По Этому Методу Выучила Английский За Пол Года!

Обучение Английскому

Здесь я себе и выбрал компьютер!

БУДЬ ВСЕГДА ПЕРВЫМ!

Первый сайт

БЕСПЛАТНО! 3D Книга. Эффект Перелистывания Страниц.
Как ускорить работу
Ускоритель Компьютера Быстрая Работа Системы ПК!
Ускоритель Компьютера