Картинка ссылки – Insane Pictures бесплатный удобный хостинг изображений (фотохостинг). Разместить изображение в интернете

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

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

Безусловно, контент, полезная информация — то, ради чего читатели приходят на наши блоги. И, конечно, нам приятно, когда они задерживаются у нас в гостях чуть дольше приличия. Не секрет, что мы все по большей части визуалы и любим разглядывать  картинки.

Кроме того, картинка, являясь емким образом, тоже способна передавать информацию. Эмоциональную. И, в отличие от текста, она всегда остается некоторой загадкой, недосказанностью.. Мы видим образ, пару-тройку слов к нему, и вот уже хочется узнать, что за всем этим стоит. В этом секрет тизерной рекламы.

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

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

В разработке материала мне помог Владимир Марник — владелец сайта ХостинДО и автор проекта ПомогайБлог, подсказав, как сделать картинку ссылкой, используя возможности  Wordpress, за что я ему очень благодарна.

Вставляем в картинку ссылку

Для удобства материал разбит на две части — смотря что вы хотите сделать. Первая часть — как сделать картинку ссылкой для размещения в статье блога. То есть вы можете сделать все или некоторые изображения в статьях кликабельными.

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

Часть 1:

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

1. Создаем новую запись

Заходим в админпанель: КОНСОЛЬ → ЗАПИСИ → ДОБАВИТЬ НОВУЮ → ЗАГРУЗИТЬ/ВСТАВИТЬ.

Появится такое окно:

2. Загружаем картинку на хостинг

Нажмите кнопку ВЫБЕРИТЕ ФАЙЛ и в появившемся окне проводника выберите нужную картинку со своего компьютера. Затем нажмите ОТКРЫТЬ.  Когда файл загрузится, выберите нужный размер картинки, задайте заголовок и в нижней части окна нажмите кнопку ВСТАВИТЬ в ЗАПИСЬ.

 

3. Вставляем нужную ссылку

Когда картинка появится, щелкните по ней мышкой, чтобы выделить (картинка станет синего цвета, как на рисунке). После чего в верхней панели инструментов на вкладке  нажмите на значок «Цепь» (на рис. выделено красной стрелкой):

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

В графе «Открывать в новом окне» поставьте обязательно галочку и нажмите ОБНОВИТЬ.

Все готово — теперь картинка стала кликабельной. Таким способом можно вставлять изображения, в том числе самодельные баннеры, в любое место статьи — в начало,  середину или конец текста.

Часть 2:

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

А вот теперь научимся ставить ЛЮБУЮ картинку или баннер в сайдбар. Например, вы хотите сделать картинку-перенаправление на вашу страницу захвата, собственный инфопродукт, важную статью или на продающую страницу партнерского сайта. Или хотите поставить в сайдбар (в подвал или шапку) баннер собственного изготовления (как сделать свой баннер, можно узнать в бонусе к статье Как сделать баннер в новом окне>>).

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

В самом конце, когда нажмете ОБНОВИТЬ и картинка появится в записи, нужно перейти на вкладку HTML (красный кружок на рисунке):

И вот он — готовый код (в синем овале на рисунке). В нем уже заложена нужная ссылка, размеры картинки и переход в новое окно. Скопируйте этот код и вставьте в виджет. Нажмите СОХРАНИТЬ в виджете и переходите на сайт. Проверьте размер картинки, корректность отображения и работает ли ссылка.

Как скрыть ссылку от индексации:

Если вы хотите скрыть ссылку от индексации (например, партнерскую), когда скопируете готовый код в виджет, сразу после ссылки <a href=»ССЫЛКА» поставьте тег rel="nofollow" — после закрывающей кавычки. И нажмите СОХРАНИТЬ в виджете.

Как уменьшить размер картинки в сайдбаре:

Если размер картинки нужно уменьшить, вернитесь в сайдбар, откройте виджет и отрегулируйте цифры так, чтобы подогнать их под размер виджета вашего блога:

 

alt=""

 

Я измеряю размер виджета не на глаз — для этого есть удобная программка FastStone Capture, а в ней линейка, позволяющая точно измерить высоту и ширину виджета, да и любого другого элемента вашего блога. Но раньше настраивала навскидку, просто экспериментируя с цифрами.

 ПОЛЕЗНЫЙ НАВЫК:

Уменьшаем вес фотографии

Как вставить в виджет два банера

Дополнительный блок по просьбам моих читателей.

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

<table><tr><td>КОД БАННЕРА №1</td><td>КОД БАННЕРА №2</td></tr></table>

Чтобы картинки встали тютелька в тютельку, нужно уменьшить размер, как описано параграфом выше.

Если ниже нужно расположить ещу пару, то можно создать еще один виджет. Таким образом можно создавать бесчисленное множество групп банеров.

И не забывайте закрывать от индексации, если ссылки партнерские, особенно на главной странице сайта. Такие уж у нас поисковики, что в открытую работать — в бан можно загреметь 🙂

Вот, пожалуй, и все. Теперь у вас есть инструмент, с помощью которого вы можете творить в своем блоге все, что вам захочется. Удачи!

Поделитесь пожалуйста, если понравилось:

Возможно вам будет интересно еще узнать:

как сделать картинку ссылкой | НОВИЧОК В ИНТЕРНЕТЕ

 

Здравствуйте, мои дорогие читатели!

Когда мы с Вами учились делать ссылку активной, я Вам обещала, что научу как сделать картинку ссылкой.

И сегодня я Вам покажу как сделать эту картинку-ссылку с помощью html и поставить её в сайдбар Вашего блога. Так же при помощи этого кода, Вы сможете вставить эту картинку — ссылку в любое место.

Зачем делать картинку ссылкой? При нажатии на картинку, человек перенаправляется либо на какой-то сайт, либо на какую-то страницу Вашего блога.

Если Вы посмотрите на мой сайдбар, то увидите там две картинки-ссылки. Первая — «Подарок для Вас» перенаправляет читателя на мою мини-сайт воронку, где можно подписаться на бесплатный курс. Вторая — «Призы для ТОП комментаторов» перекидывает читателя на страницу моего блога «Не пропустите».

По мнению некоторых успешных блоггеров, поисковики любят не картинки-ссылки, а текстовые ссылки и советуют с картинкой помещать также и активные текстовые ссылки.

Вы видите, что у меня в сайдбаре под картинкой-ссылкой стоит текстовая ссылка, ведущая туда же, куда и картинка.

Как делать текстовую ссылку активной, Вы можете почитать здесь.  А мы займёмся картинкой и сделаем её ссылкой.

Старайтесь на блоге размещать не просто картинки, взятые из Яндекса и Гугла, а уникальные картинки — сделанные Вами фотографии или обработанные картинки.

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

1). Чтобы получить ссылку на картинку, надо чтобы она находилась в Сети Интернет. Поэтому нам надо её с Вашего компьютера разместить в интернет.

а).Это можно сделать, загрузив картинку на Ваш блог. Идём в админ-панель Вашего блога, вкладка «Медиафайлы» — «Добавить новый» — «Выберите файлы» и загружаете с компьютера нужную картинку. Когда картинка загрузится, нажимаете «Изменить». Справа будет такое окно

Вы видите ссылку на файл, копируете её. Это и будет ссылка на картинку (сохраните её в какой-нибудь файл)

б). Если же Вы не хотите нагружать свой блог лишними картинками, можете хранить свои картинки в фотохранилище и взять ссылку на картинку там. Как хранить картинки и фото в интернете, как зарегистрироваться в фотохранилище и взять ссылку, можно почитать здесь.

2). Ссылка на картинку у Вас есть,теперь нам понадобится ссылка на ту страницу, на которую будет вести картинка.

Думаю, здесь у Вас трудностей не возникнет — Вы просто открываете нужную страницу и копируете ссылочку из строки браузера (тоже сохраните её в том же файле).

Теперь надо создать HTML код этой картинки-ссылки и поместить его в сайдбар.

Даю Вам заготовочку, из которой Вы сможете сделать свою картинку-ссылку

 

<p><a href="http://inetnovichok.ru/ne-propustite/"target="_blank"><img src="http://inetnovichok.ru/wp-content/uploads/2012/11/podarki-top.jpg " title="Подарки" width=147 height=147 ></a></p>

 

Давайте разберём этот код, чтобы Вы поняли и смогли легко подставить свои данные

<p style=»text-align:center»>   выравнивает Вашу картинку по ценру. Можете здесь ничего не менять. Но если хотите, чтобы картинка была слева, то вместо center пишите left, а если хотите справа поставить картинку, то пишите right.

«http://inetnovichok.ru/ne-propustite/»  вместо этой ссылки вставляете свою ссылку на страницу, на которую картинка будет перенаправлять. Обратите внимание, что эта ссылка берётся в кавычки

target=»_blank»   страница открывается в новом окне. Если хотите, чтобы страница открывалась в этом же окне, то можете убрать эту часть кода. Но лучше оставить всё как есть.

«http://inetnovichok.ru/wp-content/uploads/2012/11/podarki-top.jpg»   вместо этой ссылки вставляете свою ссылку на картинку. Проследите,чтобы ссылка тоже была в кавычках.

title=»Подарки»   заголовок картинки, при наведении на картинку, этот заголовок будет всплывать. Название заголовка — в кавычках

width=147 height=147   это размеры картинки, width — ширина, height — высота. Вы можете изменять эти величины.

Когда Вы код собрали и подготовили, можно вставлять его в сайдбар Вашего блога.

Идёте в админ-панель блога, вкладка «Внешний вид» — «Виджеты». В «Доступных виджитах» находите вкладку «Текст» и перетаскиваете её мышкой в боковую колонку в нужное место. Открываете эту вкладку и вставляете код. Если хотите, чтобы под картинкой стояла ещё активная текстовая ссылка, то вставляете её код под кодом картинки-ссылки. И нажимаете «Сохранить». Обновляете страничку своего блога и видите картинку-ссылку в своём сайдбаре.

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

А теперь новое задание мини-конкурса «Найди смайл».

В прошлый раз смайлики нашли Ирина и Лилия и они получают:  Ирина -4 балла, Лилия-2 балла.

Общий счёт: Лилия — 11 баллов, дед Виталя — 10 баллов, Александара — 6 баллов, Ирина — 4 балла, Лана и Томский Школьник — по 2 балла, Евгения- 1 балл.

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

С уважением, Людмила Винокурова

 

Как добавить картинку через CSS и сделать её ссылкой?

Делаем картинку, добавленную через CSS, ссылкой

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

[html]<a href=»about-windows.ru»><img scr=»/image.png»></a>[/html]

Как видите, тут мы даже не задействуем CSS. Здесь представлен чистый HTML. Добавление картинки средствами CSS может быть актуальным, например, при использовании CSS спрайтов на Вашем сайте. Про CSS спрайты я напишу чуть позже. А теперь мы перейдем непосредственно к нашей теме.

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

[css].logo {
top:0;
display:block;
text-align: left;
float: left;
margin-right: 48px;
width: 114px;
height: 59px;
background: url(/img/logo.png) no-repeat;[/css]

Здесь представлен стандартный класс CSS для определенного элемента. В нашем случае данный класс определяет расположение логотипа сайта. Я не буду глубоко впадать в знакомство с CSS, по нескольким причинам:

1. Я не больно хорошо знаю CSS.
2. Редактирование файлов CSS достаточно не сложное занятие, так как все поля достаточно красноречиво говорят о своей функциональности.
3. Эта статья не предназначена для верстальщиков(тем более это они знают на зубок). Статья представлена для владельцев сайтов, которые используют общедоступные CMS и иногда влезают в него для внесения несущественных изменений, а про редактирование файлов CSS можете почитать во 2-ом пункте.

Надеюсь представленный мною вариант довольно отчетливо даёт понять как необходимо добавлять картинку в дизайн сайта. Уточню только пару моментов:

1. Класс logo должен быть описан в файле формата.css.
2. Данный файл должен быть загружен страницей. Для этого можно использовать следующий код:

   [html]<link type=»text/css» rel=»StyleSheet» href=»about-windows.ru/style.css» />[/html]

   Можете почитать подробнее про способы внедрения css-стиля в HTML-код страницы.

3. logo.png — это то самое изображение, которое мы хотим добавить в дизайн нашего сайта. Поэтому сориентируйтесь и измените путь так, как Вам нужно.

Как сделать изображение ссылкой?

Мы напрямую подошли к главному моменту данной темы. Теперь у нас уже есть необходимый нам css класс, в котором загружается необходимое нам изображение. К сожалению средствами CSS нельзя добавить ссылку для изображения, это прерогатива HTML. А это значит что в коде страницы мы должны добавить следующий код:

[html]<div>
<a href=»about-windows.ru»></a>
</div>[/html]

Что тут нужно отметить несколько моментов:

1. Мы в блоке div подключаем CSS класс, в котором указано месторасположение картинки и сама картинка.
2. Далее идет стандартная ссылка:

   [html]<a href=»ссылка»>Анкор ссылки</a>[/html]

3. Как Вы можете заметить, у нас нет анкора ссылки. Анкор ссылки — это текст, под которой скрыта ссылка. Его отсутствие это нормально.
4. И самый важный момент состоит в добавлении необходимого стиля для ссылки, чтобы для перехода по ссылке можно было бы нажать на всю ширину картинки.

Вот такими несложными действиями можно добавить картинку средствами CSS, а потом навесить на неё ссылку, уже средствами HTML.

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

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

Делаем картинку ссылкой ВК

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

Читайте также: Как сделать ссылку текстом ВК

Способ 1: Новая запись

Этот метод, по причине возможной реализации как на стене персонального профиля, так и в ленте сообщества, является единственным универсальным. Кроме того, вы можете разместить фотографию с URL-адресом на странице другого пользователя ВК, но при условии отсутствия ограничений приватности.

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

   

   Читайте также: Как сокращать ссылки ВК

   В случае этого метода и всех последующих допускается удаление префикса «http» и «www».

2. Создайте новую запись, но не спешите публиковать ее.

   

   Подробнее: Как создать запись ВК

3. Заполните основное текстовое поле заранее скопированной ссылкой.

   

   Адрес необходимо добавить именно из буфера обмена, а не ввести вручную!

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

   

   На этом моменте можно удалить текстовый вариант ссылки.

5. Превью можно менять, используя стандартный ассортимент вариаций.



6. Если вами был указан прямой URL-адрес иллюстрации, она будет добавлена к посту в качестве обычного прикрепления.

   

   То же самое касается видеозаписей с поддерживаемых хостингов.

7. Чтобы перейти к добавлению своего превью, кликните по иконке «Выбрать свою иллюстрацию».



8. В появившемся окне нажмите кнопку «Выбрать файл» и укажите путь до прикрепляемой картинки.

   

   Сайт VK не ставит перед вами каких-либо ограничений по размерам файла, но лучше всего использовать иллюстрацию с разрешением не ниже 537×240 пикселей.

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



10. В качестве результата под текстовым блоком будет представлена ссылка с картинкой.



11. Опубликованный пост получит прикрепление, соответствующее добавленному URL-адресу и фотографии.

Помимо всего сказанного, стоит учитывать еще несколько нюансов.

1. Если вы располагаете правами доступа к редактированию записей, ссылку можно вставить непосредственно во время их изменения.

   

   Читайте также: Как редактировать записи ВК

2. Картинку с URL-адресом возможно опубликовать при создании новых сообщений и работе с комментариями.



3. В случае с диалогами у вас не будет возможности самостоятельно загрузить или выбрать иллюстрацию для ссылки.

Каким бы образом вы не поступили, помните – к записи возможно добавить строго одну ссылку с графическим содержанием.

Способ 2: Заметка

Если по каким-то причинам первый вариант вас не устраивает, можно добавить URL-адрес с картинкой через раздел «Заметки». При этом метод подойдет к использованию исключительно в рамках новостной ленты на стене профиля.

Читайте также: Создание и удаление заметок ВК

1. Отталкиваясь от упомянутой инструкции, перейдите к форме создания новой записи и добавьте заметку.



2. После открытия окна «Создание заметки» подготовьте основное содержимое.



3. Кликнув левой кнопкой мыши в подходящей области, на панели инструментов выберите значок «Добавить фотографию».



4. В окне «Прикрепление фотографии» нажмите кнопку «Загрузить фотографию», после чего откройте нужную иллюстрацию.



5. Щелкните по картинке, появившейся в рабочей области редактора.



6. Выставите основные параметры, касающиеся размеров картинки и альтернативного текста.



7. В текстовое поле «Ссылка» вставьте полный URL-адрес нужной страницы сайта.



8. Если вы указываете конкретное место в рамках сайта ВКонтакте, ссылку можно сократить. Однако для этого лучше всего использовать режим вики-разметки, о котором мы расскажем далее.
9. Завершить подготовку изображения можно, воспользовавшись кнопкой «Сохранить».



10. Выйдите из редактора, кликнув по блоку «Сохранить и прикрепить заметку».



11. После публикации такой записи убедиться в работоспособности ссылки возможно путем щелчка по области с ранее обработанным изображением в окне просмотра заметки.

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

Способ 3: Вики-разметка

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

Читайте также: Как создать меню ВК

В случае с группой от вас потребуется задействовать функционал вручную, так как изначально он выключен.

Подробнее: Создание вики-разметки ВК

По умолчанию редактор вики-разметки полностью соответствует тому, что было нами показано во втором способе. Единственным отличием выступают дополнительные разделы, предназначенные специально для удобной отладки и настройки доступа.

1. Воспользуйтесь иконкой «Добавить фотографию» и добавьте изображение с URL-адресом по описанному выше методу, если вас не интересует углубленная настройка разметки.



2. Иначе же выберите на панели инструментов значок с подписью «Режим wiki-разметки».

   

   Все содержимое в этом режиме необходимо добавлять с учетом синтаксиса языка вики-разметки.

3. Для удобной загрузки иллюстрации кликните по кнопке «Добавить фотографию».

   

   Можно использовать картинки, загруженные на сайт ВК ранее и сохраненные в каком-либо альбоме.

4. После загрузки фото в рабочей области редактора появится автоматически сформированный код.

   [[photoXXX_XXX|100x100px;noborder|]]



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



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

   |100x100px;noborder|ваша ссылка]]



7. Проверить работоспособность кода можно, кликнув по ссылке «Предпросмотр» и убедившись, что нужное изображение перенаправляет на ту страницу, которая была вами указана.



8. В дальнейшем каждый посетитель группы сможет использовать ссылки.

При указании внутренних страниц сайта ВКонтакте вы можете сокращать URL-адреса, оставляя лишь наименование разделов с уникальными идентификаторами, игнорируя доменное имя.

Спецификацией допускаются следующие варианты сокращений:

• IdXXX – страница пользователя;
• Page-XXX_XXX – раздел вики-разметки;
• Topic-XXX_XXX – страница с обсуждением;
• ClubXXX – группа;
• PublicXXX – публичная страница;
• Photo-XXX_XXX – фотография;
• Video-XXX_XXX – видеоролик;
• AppXXX – приложение.

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

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

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Прямая ссылка на фото

   Прямая ссылка на изображение нужна в следующих случаях:

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

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

Как узнать ссылку на фото, загруженного в интернет

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

В Opera	В Mozilla Firefox
«копировать ссылку на изображение»
В Internet Explorer (в свойствах изображения):	Свойства изображения
Ищем ссылку в «свойствах»

В Opera также можно скопировать ссылку в свойствах изображения, в
Mozilla Firefox подобная вкладка называется «информация об изображении». В свойствах также можно узнать следующую информацию: формат файла, его размеры, вес и т.п.

Как сделать ссылку на фото

Прямую ссылку можно узнать при загрузки изображения на любой фотохостинг:

1. на Радикале — это первая строка кодов на изображение:
   Выберите раздел «Мультизагрузка» -> «Выбрать файлы» -> Загрузить на сервер:
   После этого вы будете перемещены в окно, где увидите прямые ссылки на загруженные изображения:
2. на https://wampi.ru/ —  загружайте и делитесь изображениями,
3. https://ru.imgbb.com/ — хостинг картинок,
4. https://wmpics.pics/zagruzit-foto-i-poluchit-ssylku/ — загрузи фото и получи ссылки

Опубликовано Иванова Наталья

Смотреть все записи от Иванова Наталья

Навигация по записям

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

Ссылку ВК можно добавить не только в виде слова или словосочетания, но и как изображение. Такой вариант представления позволяет привлечь больше внимания к публикации на стене; заставляет пользователя сделать переход при прочтении wiki-статьи. В текущем материале предоставим инструкцию, как сделать ссылку на фото ВКонтакте.

Добавление фотографии ссылкой в публикации

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

• Скопировать адрес страницы, на которую требуется сослаться. Это может быть внутренняя публикация социальной сети или внешний ресурс.
• Перейти в профиль или группу, где планируется размещение новости.
• Вставить ссылку в поле, предназначенное для создания публикации.
• Дождаться пока система обработает предоставленный адрес. Внизу появится полоска с заголовком страницы и картинка, выставленная по умолчанию.
• Нажать на полупрозрачный значок фотоаппарата.

• Кликнуть по кнопке «Выбрать файл». Изображение должно быть больше 537х240 px, а также иметь формат jpg, png, gif.

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

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

• Осталось опубликовать запись. По желанию можно добавить описание в верхней части.

Задача выполнена. В публикации будет отображаться картинка, после клика на которую, произойдет открытие ссылки.

Добавление фотографии ссылкой на wiki-странице

При формировании wiki-страниц также можно воспользоваться указанной функцией. Хотя в этом случае алгоритм будет отличаться:

• Перейти в группу, где требуется создать wiki-статью.
• Открыть вкладку «Свежие новости».
• Кликнуть по кнопке «Редактировать».

• Отобразится панель инструментов. На ней следует отыскать значок фотоаппарата и кликнуть по нему.

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

• Когда картинка отобразится на странице, на нее нужно нажать. Если отображается текстовый код, значит, включен режим wiki-разметки и требуется перейти в визуальный редактор для упрощения задачи. Делается это нажатием по значку <>, в верхнем правом углу панели инструментов.

• Во всплывающем окне указать следующие данные:
  • Текст – вписанные сюда слова будут отображаться при наведении курсора на фотографию (можно оставить пустым).
  • Ссылка – в это поле вставляется ссылка, на которую требуется перенаправить пользователя после клика.
  • Размер – желаемый размер картинки. Чтобы избежать перекосов, следует активировать опцию «Сохранение пропорций».
• Кликнуть по кнопке «Сохранить».

Задача выполнена. Осталось добавить текст на страницу, если это требуется и провести ее сохранение.

Справка. Создать wiki-страницу напрямую можно только в группах. На публичных страницах доступа к этому разделу нет. Чтобы обойти запрет, необходимо воспользоваться ссылкой вида: https://vk.com/pages?act=edit&oid=-***&p=название_страницы. Вместо «***» нужно указать ID паблика, а в конце вписать желаемый заголовок создаваемой страницы.

Следуя указанным в статье рекомендациям, получится создать ссылку в виде фотографии, как на стене, так и внутри wiki-страницы. Оба варианта просты в освоении и доступны любому пользователю социальной сети. Представив в таком виде ссылку, легко привлечь внимание других участников ВК и добиться увеличения количества переходов.

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

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

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

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

Давайте для начала разберемся, как сделать ссылку с картинки и для чего это нужно. По умолчанию, после того как Вы добавили картинку в Вордпресс, на нее будет поставленная ссылка, которая ведет на библиотеку Вашего блога. Адрес будет примерно такой http://Ваш блог/wp-content/uploads/2013/02/название картинки, при чем от этого нет никакого толка. При нажатии картинка будет открываться на пустой странице для просмотра и все.

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

Откроется следующее окно.

В данном окне, нужно указать ссылку ведущую на нужную страница, это может и Ваша партнерская ссылка, к примеру, хотите сделать интернет-магазин- узнайте об этом бесплатно здесь или любая другая. Затем поставить галочку «Открывать ссылку в новом окне», чтобы Ваш сайт не закрылся и далее нажать «Добавить ссылку». Все готово, таким образом Вы сделали картинку со связанной ссылкой и теперь при нажатии на рисунок, пользователь попадет на нужную страницу. Если это нужно сделать обязательно, то необходимо написать призыв к действию. К примеру — нажмите на картинку ниже и получите подарок.

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

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

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

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

Как же это сделать, а сделать это очень просто. Как обычно добавляем картинку в библиотеку и видим следующее окно, смотрим скриншот.

В строке URL ссылки нужно выделить ссылку и удалить ее, затем нажать на кнопку «Нет», а далее вставить в запись. Таким образом у Вас будет картинка без ссылки. Как говорится — что и требовалось доказать. Все на самом деле очень просто, но надо знать, как и что делать. Такое размещение картинки будет наиболее правильным в плане оптимизации. Естественно должны быть прописаны заголовок и описание.

Вот в принципе и все на сегодня. Теперь Вы знаете как картинку сделать ссылкой и как сделать картинку без ссылки. Как всегда жду Ваших комментариев и вопросов. Не забудьте поделиться статьей в социальных сетях. Желаю Вам удачи и достижения поставленных целей.

С уважением, Евгений Вергус.

Спасибо Вам за то, что поделились статьей в социальных сетях!

Вконтакте

Facebook

Телеграм

Твитнуть