Как сделать картинку ссылкой
Когда мы с Вами учились делать ссылку активной, я Вам обещала, что научу как сделать картинку ссылкой.
И сегодня я Вам покажу как сделать эту картинку-ссылку с помощью html и поставить её в сайдбар Вашего блога. Так же при помощи этого кода, Вы сможете вставить эту картинку — ссылку в любое место.
Зачем делать картинку ссылкой? При нажатии на картинку, человек перенаправляется либо на какой-то сайт, либо на какую-то страницу Вашего блога.
При желании можно под картинкой-ссылкой сделать ещё текстовую ссылку, ведущую туда же, куда и картинка.
Как делать текстовую ссылку активной, Вы можете почитать здесь. А мы займёмся картинкой и сделаем её ссылкой.
Старайтесь на блоге размещать не просто картинки, взятые из Яндекса и Гугла, а уникальные картинки — сделанные Вами фотографии или обработанные картинки.
Итак, Вы подготовили картинку, которую будете делать ссылкой. Для этого нам нужны будут 2 ссылки: ссылка на саму картинку и ссылка страницы, куда Вы будете перенаправлять читателя.
1). Чтобы получить ссылку на картинку , надо чтобы она находилась в Сети Интернет. Поэтому нам надо её с Вашего компьютера разместить в интернет.
а).Это можно сделать, загрузив картинку на Ваш блог. Идём в админ-панель Вашего блога, вкладка «Медиафайлы» — «Добавить новый» — «Выберите файлы» и загружаете с компьютера нужную картинку. Когда картинка загрузится, нажимаете «Изменить». Справа будет такое окно
Вы видите ссылку на файл, копируете её. Это и будет ссылка на картинку (сохраните её в какой-нибудь файл)
б). Если же Вы не хотите нагружать свой блог лишними картинками, можете хранить свои картинки в фотохранилище и взять ссылку на картинку там. Как хранить картинки и фото в интернете, как зарегистрироваться в фотохранилище и взять ссылку, можно почитать здесь.
2). Ссылка на картинку у Вас есть,теперь нам понадобится ссылка на ту страницу, на которую будет вести картинка .
Думаю, здесь у Вас трудностей не возникнет — Вы просто открываете нужную страницу и копируете ссылочку из строки браузера (тоже сохраните её в том же файле).
Теперь надо создать HTML код этой картинки-ссылки и поместить его в сайдбар.
Даю Вам заготовочку, из которой Вы сможете сделать свою картинку-ссылку
Давайте разберём этот код, чтобы Вы поняли и смогли легко подставить свои данные
выравнивает Вашу картинку по ценру. Можете здесь ничего не менять. Но если хотите, чтобы картинка была слева, то вместо 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код.
Поделиться с друзьями:
Похожие публикации
Добавить комментарий
Комментарии
дед Виталя | 14.03.2013 13:19
Хорошая статья!
Повторю всё, связанное со ссылками-картинками, с большим удовольствием. В своё время я столько бился, чтобы разобраться с этим, искал по крохам инфу в Гугле и Яндексе.
Сейчас же с Вашей помощью, Людмила, новички получают превосходную информацию и инструкции к действию =) [Ответить]
Людмила Винокурова Reply:
14 марта, 2013 at 13:40 Спасибо, Виталий, за оценку моего труда.
Я тоже столько времени тратила, чтобы найти такую информацию. Поэтому хочу чтобы новички экономили время- столь драгоценный ресурс! [Ответить]
Лилия Reply:
15 марта, 2013 at 23:09 Спасибо Людмиле,что сейчас всё можно найти в одном месте и не тратить время на поиски [Ответить]
Степан Reply:
18 марта, 2013 at 11:49 Честно говоря я не считаю себя новичком, но про ссылку картинку ничего не знал! [Ответить]
Сюрпризы жизни Reply:
18 марта, 2013 at 19:38 =) А зря, очень даже полезная информация, а как же баннер и т.д. Блоггерам без таких знаний никуда! [Ответить]
Людмила Винокурова Reply:
19 марта, 2013 at 14:20 Да, Степан, мы ещё многого не знаем, поэтому, когда узнаЁм — делимся друг с другом информацией! [Ответить]
Мозгунова Ирина Reply:
22 декабря, 2013 at 12:41 Согласна с Вами, Лилия, Людмила постаралась для нас, переделала всю найденную информацию в более удобную форму — вот теперь радуемся и читаем! Всё понятно — и, главное, в одном месте! [Ответить]
Наталия Хоробрых Reply:
18 марта, 2013 at 19:38 О, бесценная статья, а то мне самой кажется, что как-то нерационально я использую медиафайлы, картинки, насчет того, чтоб ее сделать ссылкой — даже мысли не приходило… А ведь действительно можно. [Ответить]
Людмила Винокурова Reply:
19 марта, 2013 at 13:35 Конечно, Наталья ,возьмите на вооружение! [Ответить]
Николай Чернов Reply:
30 мая, 2013 at 13:56 Людмила, я сейчас забил в яндексе… Как сделать картинку ссылкой. Твой блог с этой статьёй на 20 месте. [Ответить]
Людмила Винокурова Reply:
31 мая, 2013 at 15:33 Будем стремиться к лучшему �� [Ответить]
Николай Чернов Reply:
19 июня, 2013 at 10:32 Думал, ты обрадуешься… 20 место — это круто, но стремиться есть куда, согласен.? [Ответить]
Людмила Винокурова Reply:
20 июня, 2013 at 20:13 Я по некоторым запросам в ТОП 10, а мой Новичок в Интернет на 1 месте, хотя, конечно, это совсем НЧ запрос. [Ответить]
Николай Чернов Reply:
21 июня, 2013 at 03:44 Супер, когда в Топ 10. =) Это как ты проверяешь? Набираешь словосочетание… Новичок в Интернет? [Ответить]
Людмила Винокурова Reply:
24 июня, 2013 at 12:54 Так тоже, а также через статистику Лавинетрнет и сайт аудитор.
Николай Чернов Reply:
21 июня, 2013 at 03:47 Я сейчас смотрю, сравниваю, анализирую… ты же меня научила смотреть статистику других сайтов, смотрел и твою!У тебя столько комментариев, а ядро аудитории маленькое почему то — 6%… [Ответить]
Людмила Винокурова Reply:
24 июня, 2013 at 12:53 Потому что от общего количества посетителей, больший процент идёт с поисковых систем, чем с закладок (постоянная аудитория).
Эмили Reply:
25 июня, 2013 at 04:38 Интересно, а когда я открываю Ваш сайт из своей почты, из письма о новых комментариях — как это считается, откуда посетитель.
Думаю, большинство комментаторов так возвращаются на сайт, и это должно как-то благоприятно учитываться. Но, похоже, это не так… [Ответить]
Николай Чернов Reply:
25 июня, 2013 at 05:25 Точно, Людмила.
Я так же, как и Эмили, захожу с почты. Т.е. с подписки на комментарий, как мой заход на сайт отображается? [Ответить]
Людмила Винокурова Reply:
26 июня, 2013 at 14:40 Так и отображается — с почты (email)
Эмили Reply:
28 июня, 2013 at 04:50 Понятно, Людмила. Но выходит, полезнее для статистики было бы, если б мы заходили на сайт из закладок? Так можно договориться) [Ответить]
Николай Чернов Reply:
28 июня, 2013 at 07:00 А я не понял… почему для статистики лучше из закладок заходить, чем из почты? [Ответить]
Эмили Reply:
30 июня, 2013 at 23:10 Это я , Николай, так решила (возможно, ошиблась!) после слов Людмилы: «больший процент идёт с поисковых систем, чем с закладок (постоянная аудитория)» после вопроса о небольшом проценте ядра аудитории.
Выходит из этой фразы, что закладки — постоянная аудитория. А мы с Вами, типа, не постоянная %)
Обидно… [Ответить]
Людмила Винокурова Reply:
3 июля, 2013 at 15:58 Нет, Эмили, все, кто приходит на блог постоянно (с разных источников — закладки, почта, со своего блога), считаются ядром аудитории — моя постоянная аудитория. Просто я так выразилась — одним словом «Закладки» ,чтобы не расписывать все источники. Так что — не обижайтесь! Вы моя самая постоянная, любимая, дорогая аудитория! ��
Сюрпризы жизни | 14.03.2013 17:49
О, ещё один вопрос, возникающий у каждого новичка… Очередная «головная боль» решена. Спасаешь ты начинающих =) [Ответить]
Людмила Винокурова Reply:
15 марта, 2013 at 01:54 Стараюсь, Юлечка! [Ответить]
Ирина Раковец Reply:
16 марта, 2013 at 16:39 Это миссия Людмилы 8) Скоро она всех научит компьютером и интернетом пользоваться �� [Ответить]
Сюрпризы жизни Reply:
16 марта, 2013 at 18:33 Да, благородное дело делаешь, Людочка! =) Достойное! И нас «старичков» заставляешь встряхнуть в памяти все нюансы �� [Ответить]
Лилия Reply:
21 марта, 2013 at 15:47 Людмила новичков очень спасает. Самой мне бы не найти столько информации,сколько я здесь нахожу. [Ответить]
Галина | 14.03.2013 19:37
Не знала, чо картинку можно сделать ссылкой, хорошая идея, беру на вооружение. 8) [Ответить]
Людмила Винокурова Reply:
15 марта, 2013 at 01:52 Да, идея неплохая! Удачи, Галина! [Ответить]
Лана | 14.03.2013 21:13
да хорошая инструкция все ясно и понятно, даже и не знаю откуда это знаю, может с платного курса, а многое сама додумалась, в поисковиках редко ищу [Ответить]
Ирина Раковец Reply:
16 марта, 2013 at 16:39 Может Вам это от природы дано, Лана? =) [Ответить]
Сюрпризы жизни Reply:
16 марта, 2013 at 18:35 Ничего себе… Лана, у вас точно талант! Я сама пытаюсь додумывать уже только после того, как Яндекс и Гугл меня чуть ли не посылают �� Нужно признаться, при определённых базовых знаниях, бывает что и получается! [Ответить]
Лилия Reply:
21 марта, 2013 at 15:48 ничего себе! а мне вот самой додуматься не дано. =-O [Ответить]
Ирина Раковец Reply:
24 марта, 2013 at 10:42 Не всегда такие интуитивные действия оказываются правильными, но порой время хорошо экономят =) [Ответить]
Лилия Reply:
26 марта, 2013 at 12:24 экономия времени-это очень хорошо. *THUMBS UP* [Ответить]
Лана | 14.03.2013 21:23
про смайлики — в одной статье два было и все, странно, больше не нашла, потерялись, или они могли в одной статье сразу два быть? [Ответить]
Людмила Винокурова Reply:
15 марта, 2013 at 01:47 нет, в одной статье один смайл. [Ответить]
Ирина Раковец | 15.03.2013 04:51
Отличный мануал, Люда! Прям как раз для новичков �� [Ответить]
Лилия Reply:
16 марта, 2013 at 00:03 для новичков самое то! =) [Ответить]
Ирина Раковец Reply:
16 марта, 2013 at 02:32 Вот и я про это! �� [Ответить]
Елена Олейникова | 15.03.2013 11:55
А я наоборот ссылку картинкой делаю �� [Ответить]
Людмила Винокурова Reply:
15 марта, 2013 at 12:42 Можно это назвать разными именами, но результат-то тот же! �� [Ответить]
Елена Олейникова Reply:
15 марта, 2013 at 15:28 Нет, другой. У вас описано, как сделать картинку ссылкой, то есть нажимаешь на картинку, переходишь по какой-то ссылке. А у меня наоборот — нажимаешь на ссылку, появляется картинка �� [Ответить]
Елена Олейникова Reply:
15 марта, 2013 at 15:37 А, сдаетесь? Или ответ знаете? Тогда вам прямая дорога в мою викторину, вот здесь http://million-iz-interneta.ru/vneshnij-disk.htm вопрос, как сделать ссылку картинкой, ответ опубликуете, получите балл �� [Ответить]
Ирина Раковец Reply:
16 марта, 2013 at 02:33 Елена, это какой-то маркетинговый ход, чтобы зашли на Ваш сайт? Вы просто пригласите, мы зайдем �� [Ответить]
Елена Олейникова Reply:
17 марта, 2013 at 04:10 Причем тут маркетинговый ход? Я у Людмилы в блоге довольно часто бываю, даже премию у нее получила за комментирование, какой мне смысл маркетингом заниматься? Всех марафонцев я к себе в блог еще в начале марафона приглашала, кому было интересно, дорогу знают. [Ответить]
Сюрпризы жизни Reply:
16 марта, 2013 at 18:37 О, что-то весьма интересненькое намечается, иду смотреть… [Ответить]
Людмила Винокурова Reply:
17 марта, 2013 at 17:23 Елене: А, ну так это скорее относится к смоей статье «Как сделать ссылку активной», перенаправление на Url с картинкой ( a href) и сама ссылка (или слово, под которое спрятана ссылка). Это гораздо проще, чем картинку — ссылку. [Ответить]
Сюрпризы жизни Reply:
18 марта, 2013 at 19:39 Ага, Люда, блеснула таки знаниями! �� А я вот призадумалась над ответом! [Ответить]
Алексей | 15.03.2013 12:50
Спасибо за подробную информацию обязательно воспользуюсь Вашими советами. [Ответить]
Людмила Винокурова Reply:
16 марта, 2013 at 00:59 Алексей, если будут вопросы-обращайтесь! [Ответить]
Helga | 15.03.2013 13:40
Пусть с печеными блинами
К вам достаток в дом войдет,
Чтоб всего добились сами,
Пусть по жизни вам везет. А еще , хлопот не знайте,
Улыбайтесь, всем назло,
Масленицу так встречайте,
Чтобы в жизни повезло
С МАСЛЕНИЦЕЙ! [Ответить]
Людмила Винокурова Reply:
16 марта, 2013 at 00:59 Спасибо за поздравления! [Ответить]
Ирина Раковец Reply:
16 марта, 2013 at 02:34 Ой, и мне такой же стишок написали �� [Ответить]
Лана | 15.03.2013 14:41
=) Вы бы писали статьи в одно и тоже время, было бы забавнее — очередь за смайликами занимать [Ответить]
Ирина Раковец Reply:
16 марта, 2013 at 02:35 Это не так интересно. Тут как раз благодаря элементу неожиданности выиграть может каждый, а не тот, у кого по времени пост быстрее опубликуется. Пусть все остается также �� [Ответить]
Сюрпризы жизни Reply:
16 марта, 2013 at 18:40 Мне тоже кажется, что так выиграть шансы у каждого, а если все будут настоящую погоню за смайликами устраивать в 5 часов, например, те кто работают всегда не удел?! Спонтанность должна быть, определённо! [Ответить]
Лилия Reply:
21 марта, 2013 at 15:50 тоже считаю,что должна присутствовать интрига и секрет [Ответить]
Андрей Чашин | 15.03.2013 23:11
Толковая статья, понятно поданная информация. Спасибо! [Ответить]
Людмила Винокурова Reply:
21 марта, 2013 at 15:51 Пожалуйста, Андрей! Заходите почаще! =) [Ответить]
Галина Гармай | 15.03.2013 23:50
Спасибо, Людмила, за подробный расклад. [Ответить]
Людмила Винокурова Reply:
16 марта, 2013 at 01:00 Пожалуйста, Галина! Лишь бы пригодилось Вам! [Ответить]
Лилия | 16.03.2013 00:06
может наоборот -тот кто чаще заглядывает к Людмиле,тот и получает смайлы. Я когда у компьютера — к Людмиле не один раз за день заглядываю. [Ответить]
Ирина Раковец Reply:
16 марта, 2013 at 02:36 Это и было основной задачей. Улучшить поведенческие факторы на блоге �� [Ответить]
Лилия | 16.03.2013 00:07
интересный материал,только ссылку изучила-уже и картинка с ссылкой появилась =) [Ответить]
Ирина Раковец Reply:
16 марта, 2013 at 16:42 Попробуйте за Людмилой угнаться… �� [Ответить]
Сюрпризы жизни Reply:
16 марта, 2013 at 18:42 Так это правильно, что бы ничего не успело забыться =) Сразу, так сказать, идёт закрепление материала! �� [Ответить]
Ирина Раковец Reply:
25 марта, 2013 at 19:06 Конечно, если полученные знания не применить в течение 72 часов, то они забудутся. Поэтому надо действовать сразу �� [Ответить]
Лилия Reply:
26 марта, 2013 at 12:26 а потом повторять и повторять! �� [Ответить]
Ирина Раковец | 17.03.2013 03:20
Ой, Люда твоя новая кнопочка «Наверх» мне нравится еще больше старой *THUMBS UP* *DANCE* [Ответить]
Сюрпризы жизни Reply:
17 марта, 2013 at 09:34 =) Поддерживаю! Мне нравится то, что она справа, мне там удобнее =) А главное, большая-то какая, не заметить не получится! [Ответить]
Людмила Винокурова Reply:
17 марта, 2013 at 14:47 А самое главное -она находится справа и не закрывает счётчик!:) [Ответить]
Сюрпризы жизни Reply:
17 марта, 2013 at 16:27 Ага, я правда твой счётчик и так «доставала» �� Мы блоггеры выход всегда найдём! ��
Я кстати, глядя на тебя и Надежду (наконец-то!) тоже решила свою кнопочку сменить — теперь у неё два направления =) [Ответить]
Людмила Винокурова Reply:
17 марта, 2013 at 17:41 Ага, я заметила сразу. Молодец! Очень удобно. Скриптом пользовалась? [Ответить]
Сюрпризы жизни Reply:
18 марта, 2013 at 19:50 Спасибо! Конечно, же им родимым =) [Ответить]
Юлия Reply:
18 марта, 2013 at 11:59 Да, Люд, мне тоже новая кнопочка очень нравится и положением, и размером, и внешним видом, симпатичная такая. �� [Ответить]
Людмила Винокурова Reply:
21 марта, 2013 at 15:52 Я старалась, чтобы понравилось! �� [Ответить]
Ирина Раковец Reply:
24 марта, 2013 at 10:45 Тебе это удалось �� [Ответить]
Лилия Reply:
26 марта, 2013 at 12:27 похоже Людмила угодила всем. Мне тоже очень нравится эта кнопочка и удобная. [Ответить]
Василий | 17.03.2013 20:47
Я уже давно хочу что-то подобное сделать, правда, руки пока не доходят. Теперь есть где почитать об установке картинки-ссылки. =)
Людмила, я тебе на почту письмо написал по поводу твоего сайта. [Ответить]
Людмила Винокурова Reply:
17 марта, 2013 at 22:04 Да, получила, Василий, спасибо! Очень жду твоего ответа! [Ответить]
Василий Reply:
23 марта, 2013 at 19:33 Теперь совсем другое дело, вижу позитивные изменения. *THUMBS UP* [Ответить]
Юлия | 18.03.2013 11:58
Люд, теперь у тебя буду смотреть, как правильно ссылочку сделать, а то когда появляется надобность такая, приходится копаться в своей голове, вспоминая, как же это делается. �� [Ответить]
Людмила Винокурова Reply:
19 марта, 2013 at 14:19 А можешь, Юля, завести файлик и туда подсказки кодов помещать или программу, Марс Нотебук, например. [Ответить]
Елена Олейникова | 18.03.2013 12:15
Нет, у меня эффект немножко другой, когда щелкаешь на ссылку, то картинка выезжает из нее. Тут одним кодом не обойдешься, плагин нужен. А в вашем случае картинка просто открывается в другом окне. [Ответить]
Людмила Винокурова Reply:
19 марта, 2013 at 14:17 Да, зато без плагина. Но, конечно, при желании и плагин можно изучить.
Возможно, я это сделаю. Спасибо, Елен, за подсказку. [Ответить]
Natabul | 18.03.2013 20:23
Спасибо за полезный урок для всех желающих научиться делать из картинки ссылки. Теперь все будет проще намного! [Ответить]
Людмила Винокурова Reply:
19 марта, 2013 at 12:39 Пожалуйста, пользуйтесь на здоровье! �� [Ответить]
Катерина Брынина | 19.03.2013 13:42
Чтобы не ошибиться во всех тегах и кавычках можно воспользоваться записями вордпресс.
Создаем новую пустую запись. Туда вставляем нужную нам картинку. Встаем на нее. Кликаем в панельке редактора на значок «добавить ссылку» и там указываем, куда картинка вести будет.
А дальше в текстовом редакторе этот код копируем и уже куда надо вставляем.
Запись после этого можно удалить. [Ответить]
Сюрпризы жизни Reply:
19 марта, 2013 at 14:54 Тоже верно, я частенько пользуюсь возможностями «блокнота» в блоге! Так же и выравнивание и «открывать ссылку в новом окне» иногда проставляю =) А у нас в блогспоте ещё и «ноуффолоу» (пардон за мой английский �� ) можно поставить. Пару кликов и готовый код уже на руках! [Ответить]
Людмила Винокурова Reply:
21 марта, 2013 at 15:54 Совершенно верно, Екатерина!
Но не всегда такой редактор есть (например, в сайдбаре). [Ответить]
Эмили Reply:
17 июня, 2013 at 01:56 Я тоже так делала, когда с кодами совсем еще не дружила и побаивалась их вставлять! А тут автоматически прописывается) [Ответить]
Екатерина | 19.03.2013 19:59
Спасибо, за шаблон. С HTML-кодами как раз проблема. Кстати сказать, тема картинок- ссылок давно интересовала. �� [Ответить]
Людмила Винокурова Reply:
19 марта, 2013 at 21:20 Ну, вот и хорошо! Заходите, Екатерина — может ещё что интересненькое увидите! �� [Ответить]
Максим | 20.03.2013 00:06
Это я удачно зашел на ваш сайт!А я всё думал как они это делают.Спасибо большое,попрактиковался по вашей статье,очень поможет в будущем. [Ответить]
Людмила Винокурова Reply:
21 марта, 2013 at 15:54 Хорошо, Максим! Желаю Вам удачи! =) [Ответить]
Tatyana Dmitrieva | 25.03.2013 23:40
Спасибо за статью. [Ответить]
Людмила Винокурова Reply:
26 марта, 2013 at 10:35 Пожалуйста, Татьяна! Рада, что материал оказался Вам полезен! [Ответить]
Татьяна | 31.03.2013 01:38
Такого я и не знала, но вот мне эти знания очень необходимы н сегодня. Спасибо огромное. [Ответить]
Людмила Винокурова Reply:
20 июня, 2013 at 20:11 Пожалуйста, Татьяна! Заходите! =) [Ответить]
Сергей | 7.04.2013 00:09
Интересная тема, Людмила! И так доступно и доходчиво объяснили! Как нибудь попробую. =) *THUMBS UP* [Ответить]
Людмила Винокурова Reply:
20 июня, 2013 at 20:10 Конечно, Сергей, попробуйте! =) [Ответить]
Николай Чернов | 24.04.2013 06:42
Людмила, в очередной раз говорю Вам — Большое спасибо!
Для блога и его популярности — это важная тема…
У меня на блоге на подобии сделано с Фото (правда не я сам делал, приятель в гости заходил), кликаешь и попадаешь на страницу «обо мне»… Так же хочу сделать картинку — обложку своего курса, и там нужна будет ссылка. Надо вникать… [Ответить]
Людмила Винокурова Reply:
24 апреля, 2013 at 15:40 Я думаю, Николай, Вы быстро вникните в эту тему, это вначале кажется ,что сложновато, а когда разберётесь, то поймёте, что ничего сложного нет �� [Ответить]
Ирина Достай | 14.05.2013 20:59
Cпасибо, Людмила,за такое хорошую статью. Я ею воспользовалась с удовольствием. И у меня всё сразу получилось. А теперь возник следующий вопрос: на блоге в сайдбаре стоит картинка. У того, кто на эту картинку кликнет, должно начаться скачивание определённого видео на его комп. Как мне это сделать? Помогите, пожалуйста. %) [Ответить]
Людмила Винокурова Reply:
14 мая, 2013 at 22:13 Ирина, можно сделать несколькими способами, например так. Вы загружаете видео на облачный сервис, который даёт ссылку на скачивание (допустим, Яндекс-диск) — и вот эту ссылку, Вы вставляете в код ( в статье это написано «http://inetnovichok.ru/ne-propustite/» вместо этой ссылки вставляете свою ссылку на страницу, на которую картинка будет перенаправлять. Обратите внимание, что эта ссылка берётся в кавычки). Если вдруг не получится,то напишите мне на почту (через форму обратной связи во вкладке «Контакты») и я Вам помогу. [Ответить]
Ирина Достай | 29.05.2013 13:29
Люда, большое спасибо. Вы — моя палочка-выручалочка. Всё получилось! *YAHOO* [Ответить]
Людмила Винокурова Reply:
29 мая, 2013 at 18:03 Прекрасно, Ирина! Поздравляю. �� [Ответить]
Эмили | 17.06.2013 02:01
Отличная заготовочка, так приятно — бери и пользуйся! Спасибо огромное, Людмила! Точно Вы сказали в первых комментариях — когда сам собирал информацию по крохам, то знаешь, насколько ценны такие практические «шаблоны» для новичков и не только)))
Мне давно нужно было сделать такие ссылки в сайдбаре, и вроде бы знаю, как это делается. А тут раз — и готово! Правда, еще текст рядом с картинкой пытаюсь выровнять, что-то он меня не очень слушается. [Ответить]
Людмила Винокурова Reply:
17 июня, 2013 at 15:51 Эмили, чтобы выровнять текст — как и в случае с картинкой, надо добавить к коду текста p style=»text-align:center» (по центру) или left — слева, right — справа. [Ответить]
Эмили Reply:
20 июня, 2013 at 00:05 Да, спасибо! Но я также пыталась выровнять его по вертикали на уровне центра картинки + чтобы текст тоже был ссылкой на статью. Чего-то намудрила, и картинка перестала быть ссылкой(. В общем, нашла приемлемое решение, хотя в очередной раз убедилась: нужно знать html и жить станет проще… [Ответить]
Людмила Винокурова Reply:
20 июня, 2013 at 19:53 Да, с html и css жизнь проще, ярче и красочнее! ;( [Ответить]
Эмили Reply:
25 июня, 2013 at 04:41 О, это верно и в буквальном, и в переносном смысле)
Вы где-то упоминали, что нужно изучить соответствующий курс Попова, вот и я начинала, да бросила… Хочется вернуться и засесть за него поэффективнее… [Ответить]
Николай Чернов Reply:
25 июня, 2013 at 05:41 Я тоже пол года назад, приобрел курс Е. Попова… пробовал изучать, но бросил… на тот момент, мне показалось все сложно и не понятно. Теперь понимаю, что серьезно не вникал, а просто поверхностно просмотрел, несколько уроков. [Ответить]
Людмила Винокурова Reply:
26 июня, 2013 at 14:37 Курсы Попова наскоком не выучишь, надо вникать — тогда всё будет понятно! Я уже много чего на блоге по его курсам сделала.
Эмили Reply:
27 июня, 2013 at 04:05 Точно, во-первых, наскоком не выучишь, а во-вторых, без элементарного представления о сути вопроса сложно понять что-либо. Вот когда парочку неправильных кодов пристроишь, найдешь ошибку, исправишь — тогда немного проясняется… Всему свое время. [Ответить]
Николай Чернов Reply:
28 июня, 2013 at 06:53 Это точно… будет на блоге больше 50 постов, потом начну вникать и дорабатывать блог. Сначала — главное! �� [Ответить]
Tатьяна Паломи | 17.06.2013 02:35
Картинку с ссылкой сделать легко, а вот как сделать, чтобы картинки менялись хаотично и ссылки тоже — это для меня пока еще секрет. =-O [Ответить]
Людмила Винокурова Reply:
17 июня, 2013 at 15:35 Тань, что-то я не совсем поняла — ГДЕ они должны хаотично меняться?! [Ответить]
Tатьяна Паломи Reply:
17 июня, 2013 at 15:51 Люд, хочу сделать банер из 5 картинок и 5 ссылок на статьи, чтобы они менялись хаотично. Чтобы читатель, если его заинтересовала картинка, мог на нее нажать и попасть на статью. [Ответить]
Людмила Винокурова Reply:
17 июня, 2013 at 15:57 А, поняла, типа ротатора! Тань, тема интересная. Надо, наверно, написать статью. [Ответить]
Tатьяна Паломи Reply:
17 июня, 2013 at 16:07 Да, да, Люд напиши статью! Я не буду Гуглить, а подожду твою статью. [Ответить]
Людмила Винокурова Reply:
17 июня, 2013 at 17:49 Хорошо, Тань! [Ответить]
Tатьяна Паломи Reply:
20 июня, 2013 at 00:19 Людмил, видишь народ уже в очередь выстраивается! Все ждут статью, черкай нам ее быстрее! �� [Ответить]
Людмила Винокурова Reply:
20 июня, 2013 at 19:50 Как раз в процессе! Я просто интересный материал хочу дать, а на это надо время.
Николай Чернов Reply:
20 июня, 2013 at 02:35 Не то чтобы в очередь… �� но тема интересная и нужная. [Ответить]
Эмили Reply:
20 июня, 2013 at 00:06 Такие ротаторы предлагаются в партнерках, но технически не знаю, как это реализовать, мне тоже будет очень интересно прочесть! [Ответить]
Людмила Винокурова Reply:
20 июня, 2013 at 19:51 Да, в партнёрках уже готовый ротатор под их продукты, а нам надо свой сделать. Скоро напишу. [Ответить]
Как правильно вставить ссылку в картинку в WordPress и с помощью html
Сегодня мы продолжим изучение WordPress и html и узнаем как правильно встроить активную ссылку в любую картинку на Вашем сайте.
Как вставить ссылку в картинку с помощью WordPress
Для того, чтобы привязать ссылку к картинке в WordPress нужно щелкнуть на картинку, которую вы хотите вставить как ссылку и нажать на кнопку с карандашом.
После этого, в меню «Параметры изображения» в выпадающем меню «Ссылка» выбрать пункт «Произвольный URL» и вставить адрес на который вы хотите поставить ссылку.
Как привязать ссылку к картинке с помощью html
Прежде всего, научимся вставлять в текст просто картинку с помощью html. Для вставки картинок используется тег . Рассмотрим пример:
Где:
http://site2.ru/files/image.jpg — это адрес, где находится картинка, которую необходимо вставить.
Каким образом сделать эту картинку ссылкой?
Для этого вспомним, каким образом у нас вставляется ссылка. Для этого используется тег . К примеру, так будет выглядеть код html для вставки ссылки на сайт www.site1.ru с анкором «так будет выглядеть ваша ссылка»:
Теперь для того, чтобы превратить нашу ссылку в картинку, нужно все содержимое тега вставить на место анкора в ссылке. В итоге у нас получилось:
Вот и все. В одном из следующих уроков мы научимся настраивать обтекание картинки текстом с помощью html и css. Читайте Лучший СЕО Блог, ставьте лайки, подписывайтесь на RSS и, разумеется, комментируйте.
Похожие записи
CMS сайта: что лучше Joomla или WordPress
Автор admin 16 февраля 2013 16 декабря 2016
Всем привет. Прошу прощения за длительное отсутствие. Очень много дел накопилось в офлайне. Совсем не было времени писать статьи для блога. Но вот появилась свободная минута и я снова вернулся к своему любимому Лучшему СЕО Блогу. Очень часто перед начинающими становиться проблема выбора.
Генератор html css шаблонов. Для чего он нужен?
Автор admin 2 сентября 2012 16 декабря 2016
Всем привет! Сегодняшняя теме – генератор html css шаблонов для сайта. Думаю, это будет интересно не только новичкам, но и опытным вебмастерам, так как это позволяет не только обойти некоторые технические трудности при создании html шаблона будущего сайта, что, несомненно, важно для первых, но и сэкономить довольно много драгоценного времени, что ценят вторые. Итак, приступим…
Подбор цвета html. Создаем цветовую схему Вашего сайта
Автор admin 19 июня 2014 23 декабря 2016
Всем привет! Если Вы когда-нибудь пробовали самостоятельно сделать дизайн для сайта, то Вы наверняка сталкивались с проблемой подбора цвета. В свое время, столкнулся с этой проблемой и я. В этой статье я расскажу о том, как я с этим справился. Качественно подобрать цвета для сайта в html для новичка очень сложная задача. Когда я создавал…
Как сделать иконку для сайта
Автор admin 29 июня 2013 9 августа 2019
Всем привет. Сайтов в сети много, поэтому надо пользоваться любой возможностью сделать свой сайт уникальным, выделить его из серой массы других сайтов. Для этого, есть один отличный способ. Я говорю об иконках для сайтов, так называемых Favicon(фавикон). Я продемонстрирую Вам как создается favicon.ico и каким образом вставить его на Ваш сайт или блог.
Как написать хорошую статью для сайта
Автор admin 8 января 2013 16 декабря 2016
Написание статей для сайта дело сложное и специфичное, но, в то же время, очень интересное и прибыльное. Именно этой теме посвящена сегодня статья на Лучшем СЕО Блоге.
Теги html которые используются для оформления текстa
Автор admin 5 сентября 2012 22 декабря 2016
Всем привет! В предыдущих статьях мы узнали много нового о ссылках и картинках. Теперь пора переходить к тексту. В этой статье я расскажу про наиболее популярные теги html, которые используются для того, чтобы предать тексту определенный вид. Итак, для начала создаем в блокноте пустой текстовый документ. После этого меняем его расширение с txt на html….
Как сделать из картинку кликабельную ссылку
В процессе создания дизайна и верстки сайта, мы прорабатываем большое количество элементов. Довольно часто по задумке дизайнера, некоторые графические элементы должны быть выполнены в виде ссылки. Чтобы пользователь, при нажатии на картинку, переходил на нужную страницу нашего, или же другого сайта. Как средствами HTML, можно сделать картинку ссылкой? Все очень просто, следуйте нашим инструкциям.
Теги HTML
Для выполнения нашей задачи, будут использованы два тега.
Ссылка
Для этого в HTML используется следующая конструкция:
В атрибуте » href » мы будем указывать адрес сайта или страницы, на которую нам нужно отправить пользователя, после нажатия на ссылку.
Картинка
Изображения в html добавляются с помощью такой конструкции:
Здесь мы будем настраивать атрибут » src «. В нем необходимо указать полный адрес до изображения.
Как вставить в картинку ссылку
Теперь нам нужно объединить два рассмотренных тега. Мы добавляем в нужное место заранее подготовленный графический файл. А затем закрываем его в теги » a «, назначая его, таким образом, ссылкой.
Допустим, у нас будут такие исходные данные:
- Наш сайт — site.ru
- Изображение — site.ru/img.jpg
- Ссылка на нужную страницы — site.ru/contacts.html
Итоговый HTML код будет выглядеть вот так:
Этот код позволит нам добавить на сайт картинку в виде ссылки.
Как сделать картинку ссылкой в слайдере?
При нажатии на изображение в слайдере не переходит на указанную ссылку.
Пример:
Картинка, в ссылке, но не переходит.
Вот сам сайт с слайдером: rfid-m.ru
- Вопрос задан более трёх лет назад
- 526 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 2