Доброго времени суток, уважаемые читатели моего блога. Ну вот мы и дошли до завершающего этапа оформления красивой группы Вконтакте. Мы с вами уже научились делать меню, потом создали очаровательный единый стиль-картинку и теперь готовы зассылить фото в закрепленном посте.
Если эта первая статья, которую вы читаете, то я бы порекомендовал вам отправиться к первому уроку и постичь много нового и интересного, что выведет ваш паблик на новый уровень развития и привлечет множество новых подписчиков. Однако, если ваше единственное желание, это узнать как сделать картинку ссылкой Вконтакте, просто дочитайте эту публикацию до конца.
Как сделать картинку ссылкой в HTML
Для формирования ссылок в HTML используется простой механизм. Существует специальный тег , обозначающий ссылку. Объекты, находящиеся внутри него являются ссылками. Обязательным атрибутом тега является параметр href, оперделяющий целевую страницу, на которую ссылка будет вести. Для создания картинки-ссылки, достаточно внутри ссылочного тега поместить любое изображение. Изображения в HTML вставляются с помощью тега с атрибутом src, указывающим путь к изображению.
Результирующий код для вставки изображения-ссылки выглядит вот так:
По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.
Для настройки такого изображения можно использовать все стандартные html и css функции, позволяющие менять размеры, местоположение, прописывать всевозможные атрибуты.
Для тега
часто применяется атрибут target=”_blank”, открывающий ссылку в новой вкладке.
А тег часто содержит alt=”альтернативный текст, показываемый, если картинка не загрузилась”, title=”название изображения”, height=”указывается высота в пикселях”, width=”указывается ширина в пикселях”.
Результирующий код может быть таким (логотип моего блога, ведущий на его главную страницу):
А вот так он работает:
Картинка-ссылка на CSS
Что касается CSS, то это неотъемлемая часть современного сайта. Таблицы стилей помогают избавиться от лишнего повторения однотипных участков кода, единожды прописывая свойства определенных элементов, а дальше только указывая только их названия.
Для того, чтобы сделать картинку-ссылку на CSS нам нужно пройти 2 шага:
1. Создаем класс объекта и прописываем его в таблице стилей (файл style.css).
Общий код выглядит вот так:
#link-img { display: block; width: 323px; height: 232px; background:url(https://gde-lezhit-kartinka/kartinka.png) no-repeat; }
В данном случае link-img – это класс объекта, width и height – размер изображения, background – фон объекта (в качестве фона мы устанавливаем изображение).
2. Вставляем в нужное место сайта html ссылку с атрибутом, указывающим, что она относится к классу link-img. Для этого используется тот же тег , что и в предыдущем варианте. Код выглядит вот так: id=”link-img” показывает, что ссылка не обычная, а принадлежит к данному классу, в результате чего, объект принимает свойства этого класса (высоту, ширину и фон). Обратите внимание, что внутри открывающего и закрывающего тега пусто. Мы не прописывали ничего, так как все необходимое уже содержится в свойствах класса и требуемое изображение задано фоном объекта.
Как картинку сделать ссылкой Вконтакте
В социальных сетях процедура создания ссылок из изображений отличается от обычных сайтов по той причине, что у вас нет доступа к исходному коду и мы не можем использовать html теги, поэтому процедура напоминает танцы с бубном.
Итак, давайте колдовать добавлять ссылки к картинкам (или картинки к ссылкам, кому как нравится) на стену или в сообщения в группах Вконтакте.
Шаг 1. Готовим картинку
В ВК сделать кликабельным можно только крупное изображение, минимальный размер 537 на 240 пикселей, все что меньше будет отображаться рядом со ссылкой, но не будет вести на желаемую страницу.
Поддерживаемые форматы – jpg, gif и png.
Шаг 2. Вставляем ссылку в ВК
Когда вы добавляете линк в окно сообщения, социальная сеть автоматически извлекает данные с сайта и высвечивает название страницы (об этом я упоминал в статье как сделать гиперссылку в ВК), небольшое описание и предварительное изображение (если оно есть).
Шаг 3. Вставляем изображение
Подразумевается, что автоматически сформированный Вконтакте блок для ссылки не подходит (там нет изображения, оно маленькое или вам не нравится) – надо менять.
Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).
Появится окно для выбора файла, тут же, кстати, вы увидите требования к формату и размерам изображений. Кликаете «Выбрать файл» и выбираете то, что вы подготовили на первом шаге.
После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».
После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.
Добавление фотографии ссылкой на wiki-странице
При формировании wiki-страниц также можно воспользоваться указанной функцией. Хотя в этом случае алгоритм будет отличаться:
- Перейти в группу, где требуется создать wiki-статью.
- Открыть вкладку «Свежие новости».
- Кликнуть по кнопке «Редактировать».
- Отобразится панель инструментов. На ней следует отыскать значок фотоаппарата и кликнуть по нему.
- Выбрать фотографию из уже загруженных на свою страницу, после чего кликнуть «Прикрепить» или добавить новую из памяти компьютера (вставка произойдет автоматически).
- Когда картинка отобразится на странице, на нее нужно нажать. Если отображается текстовый код, значит, включен режим wiki-разметки и требуется перейти в визуальный редактор для упрощения задачи. Делается это нажатием по значку <>, в верхнем правом углу панели инструментов.
- Во всплывающем окне указать следующие данные: Текст – вписанные сюда слова будут отображаться при наведении курсора на фотографию (можно оставить пустым).
- Ссылка – в это поле вставляется ссылка, на которую требуется перенаправить пользователя после клика.
- Размер – желаемый размер картинки. Чтобы избежать перекосов, следует активировать опцию «Сохранение пропорций».
Задача выполнена. Осталось добавить текст на страницу, если это требуется и провести ее сохранение.
Справка. Создать wiki-страницу напрямую можно только в группах. На публичных страницах доступа к этому разделу нет. Чтобы обойти запрет, необходимо воспользоваться ссылкой вида: https://vk.com/pages?act=edit&oid=-***&p=название_страницы. Вместо «***» нужно указать ID паблика, а в конце вписать желаемый заголовок создаваемой страницы.
Следуя указанным в статье рекомендациям, получится создать ссылку в виде фотографии, как на стене, так и внутри wiki-страницы. Оба варианта просты в освоении и доступны любому пользователю социальной сети. Представив в таком виде ссылку, легко привлечь внимание других участников ВК и добиться увеличения количества переходов.
Похожие записи
Поиск людей, сообществ, групп, видеозаписей вконтакте
4 шикарных приложения ВКонтакте, о которых не знает большинство пользователей
Как узнать возраст человека в вк, если он его скрыл
Как сделать картинку ссылкой на форуме
В большинстве случаев, при создании сообщений на форумах используются визуальные редакторы, через которые можно вставить изображение одной кнопкой и превратить его в ссылку другой.
Но, если такой возможности нет, то в дело вступают, BB-коды – это типичная форумная разметка, функционально похожая на HTML (большинство функций аналогичны), но, имеющая иной синтаксис.
Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.
Изображение в BB-коде указывается вот так:
Указывается ссылка на картинку.
А ссылки формируются тегами . И для создания ссылки-картинки на форуме надо завернуть одну конструкцию в другую, получится так:
Само собой, все это проделывается в текстовом режиме редактора, а не в визуальном. Вот и весь секрет.
Делаем ссылку словом
Чтобы переоформить любой тип ссылок в слово, нужно действовать по одному и тому же шаблону. Сослаться получится на сообщество, свою страницу и даже на определенные фотографии или альбомы. Ну и вставлять код можно тоже везде, где есть возможность что-либо написать, например, обсуждение, записи на стене или в сообщении.
На страницу пользователя
Попробуем сделать так, чтобы на сайт вели имя и фамилия. Для начала нам необходимо перейти на страницу интересующего нас человека и скопировать его идентификационный код (id).
Теперь запомните самую простую формулу: [idцифры|Имя пользователя]
Именно это позволит вам в дальнейшем зашифровать ссылку под любым словом. Например, вы хотите сделать запись на стене.
- Идентификатор, который мы скопировали, вставляем в строку для отправки сообщения.
- Ставим одну квадратную скобку слева, а после цифр разделительную черту «|».
- Теперь можно вставить слово, которое в итоге будет видно всем и вести на нужную страницу. Например, имя и фамилия человека, на чей сайт перенаправляет ссылка. В конце закрываем квадратной скобкой.
После того как вы отправите написанное на стену, вместо этой формулы будет гиперссылка в виде имени человека.
Важно отметить, что при создании ссылки нельзя ставить пробелы рядом со скобками и разделительным знаком. Они допускаются только в той фразе, которая будет служить гиперссылкой.
На группу
По сути, на сообщество или группу все создается по такой же схеме. Однако многие сталкиваются с тем, что в группе вместо идентификационного кода в строке браузера находится слово или фраза.
- Тогда вместо цифрового значения вставьте в формулу после открывающей квадратной скобки именно это слово или фразу.
- Копируйте ее без http или www.
- Только в случае со словом не нужно писать «id».
Теперь ставим разделительный знак и слово, которое при нажатии на него будет вести на группу.
На альбом или пост
Когда вы создаете гиперссылку на фотоальбом или пост, принцип действия остается таким же.
- Открываем нужный альбом или пост и копируем цифры из браузера.
- Далее вставляем последние цифры в нашу формулу и размещаем там, где это необходимо.
- Потом обязательно ставьте id непосредственно в формуле.
Важно запомнить, что куда бы вы ни отправляли схему, всегда копируйте в адресной строке только цифры.
Вот что получается в итоге.
На внешний сайт сделать гиперссылку в виде слова не получится. К сожалению, пока Контакт не предоставляет такую возможность.
