Код добавить в контакты. Как сделать картинку ссылкой на форуме
Сегодня мы займемся превращением изображений в активные ссылки. Вы знаете, что интернет полностью основан на гиперссылках, позволяющих кликом мыши перемещаться с одних страниц на другие. В этом плане, использование в качестве ссылок картинок имеет преимущество перед обычными текстовыми линками, так как дает возможность красиво и органично вписать всё в дизайн сайта.
Изображения часто применяются в качестве кнопок заказа на коммерческих ресурсах, эта же модель применена в рекламных баннерах, другие примеры вы встречали в интернете сами множество раз.
Я расскажу о том, как сделать изображение ссылкой на основе традиционного HTML кода и альтернативной CSS вариации. Также, мы коснемся превращения картинки в ссылку для социальной сети Вконтакте (там все не так просто). И в завершающей части статьи я расскажу о форумах, там нередко используется кодировка отличная от HTML и вставка изображений и ссылок там происходит иначе.
Как сделать картинку ссылкой в HTML
Для формирования ссылок в HTML используется простой механизм. Существует специальный тег , обозначающий ссылку. Объекты, находящиеся внутри него являются ссылками. Обязательным атрибутом тега является параметр href, оперделяющий целевую страницу, на которую ссылка будет вести.
Результирующий код для вставки изображения-ссылки выглядит вот так:
По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.
Для настройки такого изображения можно использовать все стандартные html и css функции, позволяющие менять размеры, местоположение, прописывать всевозможные атрибуты.
Для тега часто применяется атрибут target=”_blank”, открывающий ссылку в новой вкладке.
А тег часто содержит alt=”альтернативный текст, показываемый, если картинка не загрузилась”, title=”название изображения”, height=”указывается высота в пикселях”, width=”указывается ширина в пикселях”.
Результирующий код может быть таким (логотип моего блога, ведущий на его главную страницу):
|
А вот так он работает:
Картинка-ссылка на CSS
Что касается CSS, то это неотъемлемая часть современного сайта. Таблицы стилей помогают избавиться от лишнего повторения однотипных участков кода, единожды прописывая свойства определенных элементов, а дальше только указывая только их названия.
1. Создаем класс объекта и прописываем его в таблице стилей (файл style.css).
Общий код выглядит вот так:
#link-img { display: block; width: 323px; height: 232px; background:url(https://gde-lezhit-kartinka/kartinka.png) no-repeat; }
#link-img { display : block ; width : 323px ; height : 232px ; background : url (http : //gde-lezhit-kartinka/kartinka.png ) no-repeat ; |
В данном случае link-img – это класс объекта, width и height – размер изображения, background – фон объекта (в качестве фона мы устанавливаем изображение).
id=”link-img” показывает, что ссылка не обычная, а принадлежит к данному классу, в результате чего, объект принимает свойства этого класса (высоту, ширину и фон). Обратите внимание, что внутри открывающего и закрывающего тега пусто. Мы не прописывали ничего, так как все необходимое уже содержится в свойствах класса и требуемое изображение задано фоном объекта.
Как картинку сделать ссылкой Вконтакте
В социальных сетях процедура создания ссылок из изображений отличается от обычных сайтов по той причине, что у вас нет доступа к исходному коду и мы не можем использовать html теги, поэтому процедура напоминает танцы с бубном.
Итак, давайте колдовать добавлять ссылки к картинкам (или картинки к ссылкам, кому как нравится) на стену или в сообщения в группах Вконтакте.
Шаг 1. Готовим картинку
В ВК сделать кликабельным можно только крупное изображение, минимальный размер 537 на 240 пикселей, все что меньше будет отображаться рядом со ссылкой, но не будет вести на желаемую страницу.
Поддерживаемые форматы – jpg, gif и png.
Шаг 2. Вставляем ссылку в ВК
Когда вы добавляете линк в окно сообщения, социальная сеть автоматически извлекает данные с сайта и высвечивает название страницы (об этом я упоминал в статье ), небольшое описание и предварительное изображение (если оно есть).
Шаг 3. Вставляем изображение
Подразумевается, что автоматически сформированный Вконтакте блок для ссылки не подходит (там нет изображения, оно маленькое или вам не нравится) – надо менять.
Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).
Появится окно для выбора файла, тут же, кстати, вы увидите требования к формату и размерам изображений. Кликаете «Выбрать файл» и выбираете то, что вы подготовили на первом шаге.
После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».
После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.
Как сделать картинку ссылкой на форуме
В большинстве случаев, при создании сообщений на форумах используются визуальные редакторы, через которые можно вставить изображение одной кнопкой и превратить его в ссылку другой.
Но, если такой возможности нет, то в дело вступают, BB-коды – это типичная форумная разметка, функционально похожая на HTML (большинство функций аналогичны), но, имеющая иной синтаксис.
Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.
Изображение в BB-коде указывается вот так:
Само собой, все это проделывается в текстовом режиме редактора, а не в визуальном. Вот и весь секрет.
Так как я являюсь практикующим администратором групп в социальных сетях, то заходя на какой-нибудь сайт из поисковика, я обязательно заглядываю и в их группу ВКонтакте.
Как я это делаю? Конечно, благодаря виджету!
Почему я это делаю? Потому что мне интересно, каким образом тот или иной проект представлен в социальных сетях, как ведется группа, насколько она активна и т.д.
Вот так виджет вконтакте выглядит на сайте. Можете и «в живую» его увидеть — он как раз находится справа от вас. Прокрутите колесико мышки немного вниз и сами сможете его лицезреть 🙂
Зачем нужен виджет вконтакте
Самая главная задача, которую выполняет виджет — он связывает ваш сайт и ваше сообщество ВКонтакте. Огромный плюс в том, что посетитель сайта, видит на виджете, в первую очередь, своих друзей, состоящих в группе. Это всегда повышает доверие.
Вспомните себя. Наверняка вы с большим желанием вступали в группы, где уже состояли ваши друзья.
Причем, посетитель сайта буквально в один клик может подписаться на новости вашей группы. И это здорово! Ну не любят люди делать лишних телодвижений и ничего с этим не поделаешь. Лень-матушка…)
Запомните, что каждый лишний клик мышкой — это очередной барьер, который проходят далеко не все ваши посетители и подписчики.
ВКонтакте — самая посещаемая сеть рунета и огромное количество людей (если быть более точной, то около 60 млн.человек) заходят в эту социальную сеть ежедневно. И вашему бизнесу явно пойдет на пользу тот факт, что люди будут получать новости от вас именно на том ресурсе, на котором они привыкли проводить свое свободное время.
Как создать виджет вконтакте для сайта
Для того, чтобы создать виджет вконтакте откройте свою страницу в этой социальной сети.
Затем спускайтесь в самый низ экрана и слева, под таргетированными объявлениями, ищите кнопку «Разработчикам». Пару раз ко мне обращались за помощью начинающие администраторы и писали, что не могут внизу страницы найти эту самую кнопку.
Если вы тоже устали крутить колесико мышки, то поднимитесь на самый верх вашей страницы, кликните на треугольничек возле вашего имени и найдите кнопку «Помощь»
Перед вами откроется страница, внизу которой вы без труда найдете кнопку «Разработчикам»
Вы попадете на страницу разработки приложений. Кликните на кнопку «Подключение сайтов и виджеты»
Найдите раздел «Виджеты для сайтов» и кликните на кнопку «Сообщества».
Перед вами откроется страница «Виджет для сообществ», на которой вы сможете осуществить все необходимые настройки вашего виджета вконтакте. Все поля уже будут заполнены — не пугайтесь! Поля заполнены для примера 🙂
Вы увидите перед собой 5 блоков:
- В поле «Ссылка на страницу» введите адрес своей группы.
- В поле «Вид» - выбираете наиболее интересную для вас опцию:
Участники — на виджете будут отображаться аватарки участников вашего сообщества;
Новости — будут видны последние новости группы;
Только название — у вас на сайте будет только название вашего сообщества. - В третьем блоке вы сможете настроить размеры виджета — его ширину и высоту.
- В четвертом — по своему усмотрению изменить цвет фона, текста и кнопок.
- В самом нижнем поле (в красном квадрате) находится как раз тот самый код, который нам нужно будет вставить на сайт.
Попробуйте поиграться с настройками виджета. Это очень увлекательное занятие, потому что все изменения вы сможете наблюдать в режиме реального времени 🙂
Как установить блок сообщества вконтакте на сайт
Несмотря на то, что все технические вопросы, связанные с сайтом даются мне не просто, виджет вконтакте я смогла установить самостоятельно. Я думаю, что если у вас вордпрессовская площадка (мой сайт работает на движке Вордпресс), то и вам не составит труда сделать это.
Зайдите в админку сайта. В панели управления найдите «Внешний вид».
Затем там же кликните на вкладку «Виджеты». Вам нужно перетащить блок «Текст» (произвольный текст или HTML-код) в ваш сайдбар.
В блоке «Текст» можно придумать заголовок к виджету, вставить код и обязательно сохранить. Кстати сказать, заголовок — вещь не обязательная 🙂
Иногда нужно вставить какую нибудь информацию в статью типа баннер или какой нибудь формы. Эти вещи представляют из себя html код. Чтобы вставить html код в статью или страницу, никаких особых знаний не надо. Делается это очень просто. Вы уже знаете, что html код – это просто текст. Во время создания статьи или страницы выбираем режим Текст . Затем вставляем нужный Вам код. Сохраняем. И все, готово!
Есть еще способ, он позволяет вставить любой Html код на любую веб страницу.
Это тег
- style отвечает за стиль, размеры, цвет текста внутри тега,
- margin: 10px; размер отступа,
- width: 300px; размер ширины,
- height: 120px; размер высоты.
P.S. Небольшая тренировка мозга
Три лягушки сидели на берегу пруда. Одна из них решила прыгнуть в пруд. Сколько лягушек осталось на берегу?
Возможно вам это будет интересно:
- Как подключить рассылку к сайту
Иногда нужно вставить какую нибудь информацию в статью типа баннер или какой нибудь формы. Эти вещи представляют из себя html код. Чтобы вставить html код в статью или страницу, никаких особых знаний не надо. Делается это очень просто. Вы уже знаете, что html код – это просто текст. Во время создания...
Надежда Трофимова [email protected] Administrator Блог сайтВозможно Вас также заинтересует:
Как убрать /category/ из url wordpress
Как убрать category из url wordpress и зачем это надо? Как этот префикс мешает продвижению сайта.
Как отключить и включить редактор файлов в консоли wordpress
Редактирование WP-config.php как-то мало меня интересовало, но видно до некоторой поры. Все-таки пришлось. Вхожу в консоль своего сайта, а там нет редактора файлов. Вы знаете...
Как настроить тему Islemag wordpress
Islemag является одной из самых лучших бесплатных тем.
Как откатить WordPress на старую версию
Приветствую читателей моего блога. Ну вот, пришла пора и я столкнулась с проблемой при обновлении новой версии WordPress, а именно из WordPress 5 на WordPress 4.7.
Как ускорить сайт на wordpress, выключив HeartBeat API
Всем привет. Продолжаем тему ускорения сайта на wordpress. В статье Как ускорить wordpress с помощью минимизации CSS, HTML и Javascript мы убрали лишнее из файлов, но...
Здравствуйте, ребята!
Сегодня решил затронуть тему, которая никогда не перестанет быть актуальной среди молодых создателей сайтов.
Всегда существует необходимость настраивать сайты после их создания. Часть настроек выполняется через редактирование файлов установленного шаблона темы оформления. Например, нужно вставить код, выводящий похоже записи. Но куда его вставить?
Очень часто новички задают такие вопросы. Также их волнуют и другие подобные моменты, решение которых по сути, является точно таким же. К тому же, в своих будущих статьях я часто буду прибегать к вставке кодов в различные места шаблона. Поэтому, данный материал кстати, как никогда.
В данной статье я покажу, как вам очень просто определить место в вашем шаблоне WordPress, куда вам необходимо вставить любой код. Также рассмотрю другие важные моменты, которые могут волновать вас на начальном этапе.
Давайте начнем с самого верха и рассмотрим файлы, которые вам может придется редактировать, если вы захотите вставлять коды ручками, а не с помощью плагинов, ведь существует и такой вариант. Его я не приветствую, но все же для самых лентяев я опишу такие плагины в следующих статьях.
В самом начале даю видео-урок, так как без него будет сложно понять материал, изложенный в текстовом формате ниже.
Теперь объясню все подробно в текстовом формате.
Файлы, отвечающие за вывод каждого типа страниц
Если вы читали много статей на других блогах о реализации каких-то функций с помощью кодов (скриптов), то уверен на все 100%, что видели фразы наподобие:
- Вставляете этот код в файл, отвечающий за вывод главной страницы;
- Вставляете этот код в файл, отвечающий за вывод записей и другие.
Файлов, в которые может потребоваться вставлять коды, много. Но, что это за файлы? Все очень просто.
- Вывод главной страницы - index.php;
- Вывод записей - файл single.php;
- Вывод страниц - файл page.php;
- Вывод архивов и рубрик - archive.php;
- Вывод подвала - footer.php;
- Вывод страницы поиска - search.php;
- Вывод сайдбара - sidebar.php;
- Файл стилей - style.css;
- Файл вывода страницы 404 - 404.php.
Теперь, когда вам будут говорить, что нужно вставить код в такой-то файл, вы будете знать, куда необходимо смотреть.
Осталось лишь ответить на вопрос, как же определить нужное место в каждом из файлов?
Определяем место вставки кода
Сначала пройдемся по тем местам, которые определять не нужно. Они у всех будут одинаковы вне зависимости от шаблона.
Первое место, идентичное для всех шаблонов - область в файле Header.php. Это открывающий и закрывающий теги
.Между данными тегами всегда размещают какие-то скрипты, которые должны работать для всех страниц сайта. То есть разместили между данными тегами скрипт, например, социальных кнопок и они работают на всех страницах сайта, где мы сделаем их вывод.
Данные теги размещены в самом верху файла Header.php.
Содержимое, находящееся между ними, у всех будет отличаться, так как все зависит от шаблона.
Если вам говорят, что нужно вставить данный код между открывающим и закрывающим тегами head, то копируете код, ищите подобную область в своем файле шаблона и просто вставляете его между этими тегами.
Второе место, которое также идентично для всех шаблонов, находится в файле, отвечающем за вывод подвала - footer.php.
Скрипты можно подключать не только, вставив их между тегами
в файле Header.php. Можно также их подгрузить через файл footer.php, тем самым ускорив загрузку страницы сайта.Дело в том, что когда страница начинается загружаться, то она грузится сверху вниз. Если все скрипты будут находиться вверху страницы, то отображение ее содержимого замедлится, так как потребуется время на загрузку скриптов.
Наша задача - показать содержимое страницы, как можно быстрее, как посетителям, так и поисковым системам. В этом случае целесообразно сделать загрузку скриптов в самом конце страницы, чтобы сначала показать содержимое, а затем уже загрузить и все остальное.
Чтобы реализовать такой вариант, необходимо открыть файл footer.php и вставить скрипт перед закрывающимся тегом body. Находится он в конце содержимого файла, так как отвечает за окончание области страницы.
Как видим, все скрипты я вывел именно в данной области, перед закрывающим тегом
