lightanddesign.ru
You might also like
Когда я учился создавать активные ссылки, я обещал показать вам, как создавать изображения ссылок.
И сегодня я покажу вам, как создать это изображение ссылки с помощью html и разместить его в боковой панели вашего блога. С помощью этого кода вы можете вставить изображение ссылки в любое место.
Зачем давать ссылку на изображение? Когда кто-то нажимает на изображение, он перенаправляется на сайт или страницу вашего блога.
При необходимости под ссылкой на изображение можно создать текстовую ссылку, указывающую на то же место, что и изображение.
О том, как активировать текстовые ссылки, можно прочитать здесь. Затем изображение обрабатывается и привязывается к нему.
Попробуйте разместить на своем блоге собственные изображения (созданные или отредактированные), а также изображения, полученные от Яндекса или Google.
Теперь вы подготовили изображения для ссылок. Для этого вам понадобятся две ссылки. Ссылка на само изображение и ссылка на страницу, перенаправляющую читателя.
(1). Чтобы получить ссылку на изображение, необходимо получить изображение в Интернете. Поэтому нам нужно получить его онлайн с вашего компьютера
a). Это можно сделать, загрузив изображение в свой блог. Перейдите на вкладку Медиафайлы в панели администратора блога — выберите Добавить новый — Файлы и загрузите изображение со своего компьютера. После загрузки изображения нажмите кнопку "Изменить". С правой стороны появится окно.
Когда появится ссылка на файл, скопируйте ее. Будет использована ссылка на изображение (должна быть сохранена в виде файла).
b). Если вы не хотите забивать свой блог лишними изображениями, вы можете сохранить изображение в фотохранилище и получить ссылку на него там. Узнайте больше о хранении изображений и фотографий в Интернете и о том, как присоединиться к хранилищу фотографий, чтобы получить ссылки на них.
(2). Далее необходимо указать ссылку на страницу, где будет храниться изображение.
Это не должно быть проблемой. Откройте страницу и скопируйте ссылку из браузера (сохраните ее в том же файле).
Далее необходимо создать HTML-код для изображения ссылки и разместить его в боковой панели.
Вот шаблон, который можно использовать для создания собственной ссылки на изображение
Давайте разберем код, чтобы вы могли легко заменить свои собственные данные
Выровняйте изображение по центру. Здесь не нужно ничего менять. Однако если вы хотите разместить изображение на левой стороне страницы, напишите его слева, а не по центру, а если вы хотите разместить изображение на правой стороне, напишите его справа.
Если вместо этой ссылки вы введете ‘http://inetnovichok.ru/ne-propusti/’, будет введена ссылка на страницу, на которую перенаправляет это изображение. Обратите внимание, что эта ссылка должна быть заключена в кавычки.
target="_blank" Страница откроется в новом окне. Если вы хотите, чтобы страница открывалась в том же окне, вы можете удалить эту часть кода. Однако лучше оставить его на месте.
Ссылка "http://inetnovichok.ru/wp-content/uploads/2012/11/podarki-top.jpg" должна быть заменена на вашу собственную ссылку на изображение. Также убедитесь, что ссылка заключена в кавычки.
title = "Подарки" Название изображения. Этот заголовок будет появляться при наведении курсора на изображение. Название Название — заключите в кавычки.
width = 147 height = 147 — размер изображения, width — ширина, height — высота. Эти значения могут быть изменены.
После составления и подготовки кода его можно разместить в боковой панели вашего блога.
Перейдите на вкладку Внешний вид — Виджеты в панели администратора блога. В разделе Доступные виджеты найдите вкладку Текст и перетащите ее мышью в нужное место на боковой панели. Откройте эту вкладку и введите код. Если вы хотите отобразить активную текстовую ссылку под изображением, введите этот код под кодом ссылки на изображение. Затем нажмите "Сохранить". Когда вы обновите страницу своего блога, изображение ссылки появится в боковой панели.
Теперь вы знаете, как создать изображение ссылки. С помощью шаблона вы можете разместить изображение ссылки везде, где есть редактор, поддерживающий HTML-код.
