Доброго времени суток всем кто читает мой блог. Сегодня шпаргалка про то, как сделать картинку ссылкой в блоге. Обратила внимание, особенно на блогах женской тематики, устанавливаются различные баннеры с предложениями принять участие в конкурсе или другие подобные предложения. И начинающим не всегда понятно
как , кликая по баннеру мы переходим на другую страницу блога.
Картинки-ссылки вставлять можно в любом месте блога. Для начала нам необходимо всего лишь выбрать картинку, которую мы хотим сделать ссылкой. Я все изображения храню на
Radikal.ru . Кто-то пользуется Пикассо, или другим сервисом. Вот оттуда и берём ссылку на изображение. И ещё нам понадобиться адрес(URL) страницы или другого сайта на которую эта ссылка должна вести.
Чтобы долго не рассуждать давайте сразу перейдём к коду. Советую вам скопировать его и поместить в блокнот, чтобы там вносить свои изменения.
Теперь разберём этот код по частям. То, что выделено красным это адрес страницы, куда должна вести картинка-ссылка . В примере я прописала URL главной страницы своего блога.
Зелёным -это адрес нашей картинки. Меняете на URL(адрес своей картинки).
center-эта часть кода отвечает за то, что картинка будет располагаться по центру. В случаи если захочется поставить картинку влево или право соответственно меняем на left и right.
title="домой"-это слово, которое будет появляться при наведении курсора на картинку. Пишите своё. Об этом мы подробно разобрали в посте как оптимизировать картинки в блоге .
border="2"-рамка вокруг изображения. Можно убрать если не нужно.
Ну и размеры width и heigh можно менять по вашему желанию.
Таким образом у нас есть код с адресом своей картинки. Остаётся просто добавить его в боковую колонку или футер блога -ДОБАВИТЬ ГАДЖЕТ- HTML/JavaScript и установить в любое место. Так же можно делать различные кнопки-Я в твиттере и т.д.
Поймала себя на том, что нет у меня поста о том, как сделать текстовую ссылку активной. Следующий пост об этом. Там же постараюсь выложить тему , как вставить картинку ссылку внутри поста. Не пропустите.
Удачи всем нам.
как , кликая по баннеру мы переходим на другую страницу блога.
Картинки-ссылки вставлять можно в любом месте блога. Для начала нам необходимо всего лишь выбрать картинку, которую мы хотим сделать ссылкой. Я все изображения храню на
Radikal.ru . Кто-то пользуется Пикассо, или другим сервисом. Вот оттуда и берём ссылку на изображение. И ещё нам понадобиться адрес(URL) страницы или другого сайта на которую эта ссылка должна вести.
Чтобы долго не рассуждать давайте сразу перейдём к коду. Советую вам скопировать его и поместить в блокнот, чтобы там вносить свои изменения.
<center><a href="адрес страницы куда должна вести ссылка" target=_blank><img src="адрес изображения " border="2" title="пояснительный текст " width=50 height=15></a></center>
Теперь разберём этот код по частям. То, что выделено красным это адрес страницы, куда должна вести картинка-ссылка . В примере я прописала URL главной страницы своего блога.
Зелёным -это адрес нашей картинки. Меняете на URL(адрес своей картинки).
center-эта часть кода отвечает за то, что картинка будет располагаться по центру. В случаи если захочется поставить картинку влево или право соответственно меняем на left и right.
title="домой"-это слово, которое будет появляться при наведении курсора на картинку. Пишите своё. Об этом мы подробно разобрали в посте как оптимизировать картинки в блоге .
border="2"-рамка вокруг изображения. Можно убрать если не нужно.
Ну и размеры width и heigh можно менять по вашему желанию.
Таким образом у нас есть код с адресом своей картинки. Остаётся просто добавить его в боковую колонку или футер блога -ДОБАВИТЬ ГАДЖЕТ- HTML/JavaScript и установить в любое место. Так же можно делать различные кнопки-Я в твиттере и т.д.
Поймала себя на том, что нет у меня поста о том, как сделать текстовую ссылку активной. Следующий пост об этом. Там же постараюсь выложить тему , как вставить картинку ссылку внутри поста. Не пропустите.
Удачи всем нам.
хотите оформить подписку на новые шпаргалки
Благодарю, Виктория, замечательный пост, я как раз искала ответ, как же сделать себе такую кнопочку.
ОтветитьУдалитьИрина, рада, что пригодилось.Если какие вопросы возникнут обращайся.
ОтветитьУдалитьВика, помогите мне, пожалуйста! Не могу настроить свой профиль...может не так называю... Суть такова: если кликнуть на мою иконку ПЧ, то открывается минимум информации, а я хотела бы добавит туда ссылки на свой блог и короткий текст. Охо хо я уже закипела от хождения по урокам, у меня нет тех кнопок, о которых упоминают... Какой где профиль блогера или гугла... Фух, караууул!
ОтветитьУдалитьСветлана в первую очередь успокойтесь. Вы вероятно перенесли свой профиль на Гугл +. Такая проблема у многих.Я хотела написать на эту тему пост. Но, коль уж Вы кричите караул даю Вам ссылку, где подробно об этом написано и как вернуть обратно.Если поможет, отпишитесь пожалуйста.Ссылка не кликабельна, скопируйте и вставьте в строку поиска.
ОтветитьУдалитьhttp://blogger4you.blogspot.com/2013/06/blogger-remove-google-plus-comments.html?showComment=1391026878661#comment-c4297055799537495401
Сделала перерыв, успокоилась. Огромное спасибо за быстрый ответ! Стало спокойней, когда знаешь, что есть у кого спросить! Прежде, чем писать здесь, я изучила обе ссылки ( эту и в моем блоге). Теперь подробности.
ОтветитьУдалитьПроблема в том, что все рекомендации идут от перехода ИЗ Блогера в Гугл, а обратно: просто снимите галочку там же (или перейдите туда-то и прочее). У меня ступор после первого же предлагаемого шага - нет ни галочки, ни такой кнопочки ни тому подобного... В этой статье (кстати по этому блогу Светланы я делала первые свои настройки), например, нажимая на первую предложенную активную ссылку, у меня открылось совсем другое окно и никаких похожих кнопок. И так не только с этими двумя статьями, я истерзала сайтов шесть или семь. Короче. Случился ВДРУГ.
С какой стороны я зашла на этот раз на свою страницу(?) с надписью в левом вверхнем углу "Блогер" и чуть ниже Блоги пользователя(мои) и перечень моих и блогов, которые читаю? Но в этот раз чуть выше моих блогов четко выделенная строка "Вы используете профиль Гугла" !!!!!! и рядом оказалась возможность изменить!!!! Клянусь, я не могла не видеть этого раньше!
Вика я Вам не надоела?
Если не трудно взгляните, пожалуйста на мои настройки. Прислушаюсь к Вашим рекомендациям. Мне еще не все нравится и много вопросов.
Если можно,поделюсь своими наблюдениями на тему "Что изменилось"?
ОтветитьУдалить1. Подпись в моих комментариях. Нет фото и как то надо выбрать подпись? Радует только, что нажав на мое имя Вы попадете в мой блог (а раньше в Гугл)
2. Потерялись Гугловские подписчики "мой круг" (можно ли их теперь где-то увидеть?)
3. В списке Что я читаю три последние статьи АБРАКАДАБРА на английском и битая активная ссылка.
В общем, теперь надо разобраться с подпись, а остальное можно пережить.
Ой еще такой момент. При переходе в каждой строчке нахваливают и рекомендуют именно Гугловский профиль и приписка, что вернуться из Гугла можно только через 30 дней!?
ОтветитьУдалитьМоему блогу от рождения около 20 дней...
Свктлана привет. Ну через 10 дней Вы подождите. Не так уж много. Я со своего блога пока попадаю к Вам на профиль Гугл, а с Вашего на Блогеровский. С подписчикам я думаю надо просто сообщить им и они подпишутся снова. С абракадаброй не знаю, но думаю, что это косяки. блоггер. У меня иногда вообще не появляется список чтения.А про подпись я не поняла. Сейчас кликнула по ней и попала на Ваш блогеровский профиль.
ОтветитьУдалитьУ Вас в верхнем правом углу должна быть опция настроить профиль.
Обращайтесь если что..
Вика, это опять я -крышечка от чайничка.
ОтветитьУдалитьПолучается, что профиль я таки перенесла на блогер, но ведет на этот профиль моя новая подпись в комментариях и "Обо мне" в моем блоге. Все иконки ПЧ и старые и если сейчас подписываюсь ведут в Гугл. Может правда через время изменится само?
Я могу только предполагать, что поменяется,т.к. не переходила на гугл+. Но мне кажется, что если Вы подписываетесь и ведут туда, то вероятнее всего они тоже перешли на гугл.профиль.
ОтветитьУдалитьВика, спасибо, что разбираетесь в моих заморочках!
ОтветитьУдалитьСветлана, да не за что. Всегда рада помочь, если знаю как. А нет так вместе попробуем.
ОтветитьУдалитьИли через гаджет изображение. Для меня более простой способ и в нем простые настройка. Если заполнить Название- оно появится выше картинки, заполнить Подпись- под картинкой (например дату окончания конкурса). И расположить гаджет простым перетаскиванием.
ОтветитьУдалитьДа, я согласна с тобой вполне удобно.
ОтветитьУдалитьДа, я например, боюсь всяких кодов и сделала картинки - ссылки на соответствующие посты через гаджет изображение.Привязала картинку к адресу поста. Получилась кликабельная картинка - ссылка - как анонс поста или рек-ма .А еще , чтобы не было большого промежутка между гаджетами на боковой , я просто добавляла код к , допустим, верхнему гаджету) или к нижнему, смотря что нужно.Новый код можно добавлять и сверху старого и ниже старого. Т.е. получается в одно гаджете два кода на разную инфу. И расстояние между гаджетами на боковушках не такое получается большое. Но так можно сделать, только там , где есть "Изменить HTL"
ОтветитьУдалитьВсё правильно Ирина. Так все делают. Пост был на конкретно поставленный вопрос о кодах. Можно с помощью гаджета и по горизонтали ставить, и по вертикали.
ОтветитьУдалитьВика, огромное спасибо! Все получилось!
ОтветитьУдалитьЗдравствуйте Елена. Рада за вас. Посмотрю зайду.
ОтветитьУдалитьВика, что-то у меня не получается. Хотела сделать кнопку-картинку для конкретной страницы.Указала адрес страницы, картинку сохранила на Яндекс-диске, скопировала публичную ссылку. Но вместо кликабельной картинки, появился прямоугольник и в нем написано "домой". Хотя на другом блоге я уже делала подобное, правда картинка вела на другой блог.
ОтветитьУдалитьЕлена, так не сработает. Вы скопировали ссылку для скачивания. Сохраните картинку где-нибудь на радикале или другом сервисе. Можно даже в блоггере в черновике. Тогда получится. Многие хранят на блогах. У меня половина на гугл сайте.Как оттуда брать адрес писала здесь. http://www.shpargalochki.ru/2014/08/google-sajt-kak-hranilishhe-fajlov.html
ОтветитьУдалитьВика, я по ссылке в последнем комментарии страницу не нашла. А твоя информация очень нужна
ОтветитьУдалитьИрина, не знаю, но у меня открывается нормально эта страница. Давай на почту тебе сейчас ссылку на неё кину..
УдалитьВика, почему то письмо не прислалось(
УдалитьЗдравствуйте, Вика! По вашим советам без проблем делала картинки-ссылки. Но в последнее время, что-то не получается. На странице - ни картинки, ни ссылки. Не знаете почему?
ОтветитьУдалитьЕлена, вы что-то не то ставите. Дайте мне на почту Ваш весь код, который Вы ставите.
ОтветитьУдалитьПривет. Ищу, как вместо ссылки сделать слово "тут" или "здесь"? Наверное, это проще, чем картинка, но я не знаю как это сделать
ОтветитьУдалитьОлеся, выдели синим цветом слово левой кнопкой мыши и в редакторе вверху нажми на ССЫЛКА. Откроется окошко. Ну а там всё понятно.
УдалитьИ правда, все просто, спасибо!
УдалитьВика, ты не против, если я позаимствую твой код для своей статьи?
ОтветитьУдалитьИрина,Да, бери. Жалко что -ли.
ОтветитьУдалитьЗнаю, что тебе не жалко, но "дурная" привычка дает о себе знать )))
УдалитьА я уже догадываюсь для чего тебе это. Буду ждать новостей.
УдалитьВика, привет. А подскажи, какой css добавить в сообщение, чтобы картинка при наведении немного двигалась, как у тебя в этом посте.
ОтветитьУдалитьСпасибо.
Олеся, у меня так оформлены и ссылки, поэтому эффект движения. Подробнее об этом здесь http://www.shpargalochki.ru/2014/12/izmenit-cvet-ssylki-v-bloge.html#more
УдалитьКстати, пишу пост об увеличении картинки. Скоро опубликую эффект супер. следи.
О, класс, такой хочу. Буду ждать!
УдалитьДобрый день Вика! Спасибо за хорошую идею! А как можно сделать что-бы картинка была с округленными краями, пробовала поставить border-radius: 15px; что-то не получается? С уважением Тата.
ОтветитьУдалитьTata, добрый день. Про круглые картинки вот здесь писала. http://www.shpargalochki.ru/2014/05/formy-izobrazhenij-v-bloge.html
ОтветитьУдалитьБлагодарю Вика, все красиво получилось, подскажите, а как можно уменьшить расстояние между названием и самой картинкой, в тестовом блоге probtestez.blogspot.ru посмотрите пожалуйста. С уважением Тата. P.S. не дают мне покоя эти зазоры, помогите пожалуйста!
ОтветитьУдалитьTata.если это в сообщении, в редакторе в режиме HTML уберите закрывающиеся теги /BR там где нужно.
ОтветитьУдалитьВика, это в сайтбаре справа между картинкой (Iступень) и надписью (обучение).
ОтветитьУдалитьTata, Я тут не пойму-у Вас 2 отдельных гаджета или это Вы так оформили заголовок гаджета- обучение. Если вариант 1- то я Вам давала ссылку, как уменьшить расстояние между гаджетами.
ОтветитьУдалитьЕсли второе, то тут или совсем убрать заголовок http://www.shpargalochki.ru/2014/06/ubrat-zagolovok-gadzheta.html
или пробовать через стили CSS что-то такое смудрить h2.post-title{ margin: -30px 0px 0px 0px;} но не уверена что получиться.
Вика, это я так оформила заголовок гаджета (.sidebar .widget h2 {
ОтветитьУдалитьbackground-image:url(//4.bp.blogspot.com/-10nyL2WECwA/V9l03wF3TUI/AAAAAAAAAng/-y6hjPGEf58zUPKc9ogVsOk3jo-xysiUwCPcB/s1600/33.png);
height:40px;
width: 260px;
margin-left: 0px;
padding-top:7px;
font-size: 19px;
text-align: center;
} может здесь можно что-то вставить? С уважением Тата.
Вика, спасибо за подсказку я поменяла на margin: 0px 0px -10px 0px; и все получилось!!! Ура! Спасибо вам за ваше терпение и внимание! С уважением Тата.
ОтветитьУдалитьTata, ну я рада, что помогло. Только писала вам ответ Вы уже сообразили.
ОтветитьУдалитьВика, я тоже прихожу в восторг, когда что-то получается в этих для меня "абракадабрах" разобраться!
ОтветитьУдалитьУспехов Вам.
ОтветитьУдалить