Как сделать ссылку-картинку в блоге

картинка ссылка в блогДоброго времени суток всем кто читает мой блог. Сегодня шпаргалка про то, как сделать картинку ссылкой в блоге. Обратила внимание, особенно на блогах женской тематики, устанавливаются различные баннеры с предложениями принять участие в конкурсе или другие подобные предложения. И начинающим не всегда понятно
 как , кликая по баннеру мы переходим на другую страницу блога.

 Картинки-ссылки вставлять можно в любом месте блога. Для начала нам необходимо всего лишь выбрать картинку, которую мы хотим сделать ссылкой.  Я все изображения храню на
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 и установить  в любое место. Так же  можно делать различные кнопки-Я в твиттере и т.д.

Поймала себя на том, что нет у меня поста о том, как сделать текстовую ссылку активной. Следующий пост об этом. Там же постараюсь выложить тему , как вставить картинку ссылку внутри поста. Не пропустите.

Удачи всем нам.
  

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

46 комментариев:

  1. Благодарю, Виктория, замечательный пост, я как раз искала ответ, как же сделать себе такую кнопочку.

    ОтветитьУдалить
  2. Ирина, рада, что пригодилось.Если какие вопросы возникнут обращайся.

    ОтветитьУдалить
  3. Вика, помогите мне, пожалуйста! Не могу настроить свой профиль...может не так называю... Суть такова: если кликнуть на мою иконку ПЧ, то открывается минимум информации, а я хотела бы добавит туда ссылки на свой блог и короткий текст. Охо хо я уже закипела от хождения по урокам, у меня нет тех кнопок, о которых упоминают... Какой где профиль блогера или гугла... Фух, караууул!

    ОтветитьУдалить
  4. Светлана в первую очередь успокойтесь. Вы вероятно перенесли свой профиль на Гугл +. Такая проблема у многих.Я хотела написать на эту тему пост. Но, коль уж Вы кричите караул даю Вам ссылку, где подробно об этом написано и как вернуть обратно.Если поможет, отпишитесь пожалуйста.Ссылка не кликабельна, скопируйте и вставьте в строку поиска.
    http://blogger4you.blogspot.com/2013/06/blogger-remove-google-plus-comments.html?showComment=1391026878661#comment-c4297055799537495401

    ОтветитьУдалить
  5. Сделала перерыв, успокоилась. Огромное спасибо за быстрый ответ! Стало спокойней, когда знаешь, что есть у кого спросить! Прежде, чем писать здесь, я изучила обе ссылки ( эту и в моем блоге). Теперь подробности.
    Проблема в том, что все рекомендации идут от перехода ИЗ Блогера в Гугл, а обратно: просто снимите галочку там же (или перейдите туда-то и прочее). У меня ступор после первого же предлагаемого шага - нет ни галочки, ни такой кнопочки ни тому подобного... В этой статье (кстати по этому блогу Светланы я делала первые свои настройки), например, нажимая на первую предложенную активную ссылку, у меня открылось совсем другое окно и никаких похожих кнопок. И так не только с этими двумя статьями, я истерзала сайтов шесть или семь. Короче. Случился ВДРУГ.
    С какой стороны я зашла на этот раз на свою страницу(?) с надписью в левом вверхнем углу "Блогер" и чуть ниже Блоги пользователя(мои) и перечень моих и блогов, которые читаю? Но в этот раз чуть выше моих блогов четко выделенная строка "Вы используете профиль Гугла" !!!!!! и рядом оказалась возможность изменить!!!! Клянусь, я не могла не видеть этого раньше!
    Вика я Вам не надоела?
    Если не трудно взгляните, пожалуйста на мои настройки. Прислушаюсь к Вашим рекомендациям. Мне еще не все нравится и много вопросов.

    ОтветитьУдалить
  6. Если можно,поделюсь своими наблюдениями на тему "Что изменилось"?
    1. Подпись в моих комментариях. Нет фото и как то надо выбрать подпись? Радует только, что нажав на мое имя Вы попадете в мой блог (а раньше в Гугл)
    2. Потерялись Гугловские подписчики "мой круг" (можно ли их теперь где-то увидеть?)
    3. В списке Что я читаю три последние статьи АБРАКАДАБРА на английском и битая активная ссылка.
    В общем, теперь надо разобраться с подпись, а остальное можно пережить.

    ОтветитьУдалить
  7. Ой еще такой момент. При переходе в каждой строчке нахваливают и рекомендуют именно Гугловский профиль и приписка, что вернуться из Гугла можно только через 30 дней!?
    Моему блогу от рождения около 20 дней...

    ОтветитьУдалить
  8. Свктлана привет. Ну через 10 дней Вы подождите. Не так уж много. Я со своего блога пока попадаю к Вам на профиль Гугл, а с Вашего на Блогеровский. С подписчикам я думаю надо просто сообщить им и они подпишутся снова. С абракадаброй не знаю, но думаю, что это косяки. блоггер. У меня иногда вообще не появляется список чтения.А про подпись я не поняла. Сейчас кликнула по ней и попала на Ваш блогеровский профиль.
    У Вас в верхнем правом углу должна быть опция настроить профиль.
    Обращайтесь если что..

    ОтветитьУдалить
  9. Вика, это опять я -крышечка от чайничка.
    Получается, что профиль я таки перенесла на блогер, но ведет на этот профиль моя новая подпись в комментариях и "Обо мне" в моем блоге. Все иконки ПЧ и старые и если сейчас подписываюсь ведут в Гугл. Может правда через время изменится само?

    ОтветитьУдалить
  10. Я могу только предполагать, что поменяется,т.к. не переходила на гугл+. Но мне кажется, что если Вы подписываетесь и ведут туда, то вероятнее всего они тоже перешли на гугл.профиль.

    ОтветитьУдалить
  11. Вика, спасибо, что разбираетесь в моих заморочках!

    ОтветитьУдалить
  12. Светлана, да не за что. Всегда рада помочь, если знаю как. А нет так вместе попробуем.

    ОтветитьУдалить
  13. Или через гаджет изображение. Для меня более простой способ и в нем простые настройка. Если заполнить Название- оно появится выше картинки, заполнить Подпись- под картинкой (например дату окончания конкурса). И расположить гаджет простым перетаскиванием.

    ОтветитьУдалить
  14. Да, я согласна с тобой вполне удобно.

    ОтветитьУдалить
  15. Да, я например, боюсь всяких кодов и сделала картинки - ссылки на соответствующие посты через гаджет изображение.Привязала картинку к адресу поста. Получилась кликабельная картинка - ссылка - как анонс поста или рек-ма .А еще , чтобы не было большого промежутка между гаджетами на боковой , я просто добавляла код к , допустим, верхнему гаджету) или к нижнему, смотря что нужно.Новый код можно добавлять и сверху старого и ниже старого. Т.е. получается в одно гаджете два кода на разную инфу. И расстояние между гаджетами на боковушках не такое получается большое. Но так можно сделать, только там , где есть "Изменить HTL"

    ОтветитьУдалить
  16. Всё правильно Ирина. Так все делают. Пост был на конкретно поставленный вопрос о кодах. Можно с помощью гаджета и по горизонтали ставить, и по вертикали.

    ОтветитьУдалить
  17. Вика, огромное спасибо! Все получилось!

    ОтветитьУдалить
  18. Здравствуйте Елена. Рада за вас. Посмотрю зайду.

    ОтветитьУдалить
  19. Вика, что-то у меня не получается. Хотела сделать кнопку-картинку для конкретной страницы.Указала адрес страницы, картинку сохранила на Яндекс-диске, скопировала публичную ссылку. Но вместо кликабельной картинки, появился прямоугольник и в нем написано "домой". Хотя на другом блоге я уже делала подобное, правда картинка вела на другой блог.

    ОтветитьУдалить
  20. Елена, так не сработает. Вы скопировали ссылку для скачивания. Сохраните картинку где-нибудь на радикале или другом сервисе. Можно даже в блоггере в черновике. Тогда получится. Многие хранят на блогах. У меня половина на гугл сайте.Как оттуда брать адрес писала здесь. http://www.shpargalochki.ru/2014/08/google-sajt-kak-hranilishhe-fajlov.html

    ОтветитьУдалить
  21. Вика, я по ссылке в последнем комментарии страницу не нашла. А твоя информация очень нужна

    ОтветитьУдалить
    Ответы
    1. Ирина, не знаю, но у меня открывается нормально эта страница. Давай на почту тебе сейчас ссылку на неё кину..

      Удалить
    2. Вика, почему то письмо не прислалось(

      Удалить
  22. Здравствуйте, Вика! По вашим советам без проблем делала картинки-ссылки. Но в последнее время, что-то не получается. На странице - ни картинки, ни ссылки. Не знаете почему?

    ОтветитьУдалить
  23. Елена, вы что-то не то ставите. Дайте мне на почту Ваш весь код, который Вы ставите.

    ОтветитьУдалить
  24. Привет. Ищу, как вместо ссылки сделать слово "тут" или "здесь"? Наверное, это проще, чем картинка, но я не знаю как это сделать

    ОтветитьУдалить
    Ответы
    1. Олеся, выдели синим цветом слово левой кнопкой мыши и в редакторе вверху нажми на ССЫЛКА. Откроется окошко. Ну а там всё понятно.

      Удалить
    2. И правда, все просто, спасибо!

      Удалить
  25. Вика, ты не против, если я позаимствую твой код для своей статьи?

    ОтветитьУдалить
  26. Ирина,Да, бери. Жалко что -ли.

    ОтветитьУдалить
    Ответы
    1. Знаю, что тебе не жалко, но "дурная" привычка дает о себе знать )))

      Удалить
    2. А я уже догадываюсь для чего тебе это. Буду ждать новостей.

      Удалить
  27. Вика, привет. А подскажи, какой css добавить в сообщение, чтобы картинка при наведении немного двигалась, как у тебя в этом посте.
    Спасибо.

    ОтветитьУдалить
    Ответы
    1. Олеся, у меня так оформлены и ссылки, поэтому эффект движения. Подробнее об этом здесь http://www.shpargalochki.ru/2014/12/izmenit-cvet-ssylki-v-bloge.html#more
      Кстати, пишу пост об увеличении картинки. Скоро опубликую эффект супер. следи.

      Удалить
    2. О, класс, такой хочу. Буду ждать!

      Удалить
  28. Добрый день Вика! Спасибо за хорошую идею! А как можно сделать что-бы картинка была с округленными краями, пробовала поставить border-radius: 15px; что-то не получается? С уважением Тата.

    ОтветитьУдалить
  29. Tata, добрый день. Про круглые картинки вот здесь писала. http://www.shpargalochki.ru/2014/05/formy-izobrazhenij-v-bloge.html

    ОтветитьУдалить
  30. Благодарю Вика, все красиво получилось, подскажите, а как можно уменьшить расстояние между названием и самой картинкой, в тестовом блоге probtestez.blogspot.ru посмотрите пожалуйста. С уважением Тата. P.S. не дают мне покоя эти зазоры, помогите пожалуйста!

    ОтветитьУдалить
  31. Tata.если это в сообщении, в редакторе в режиме HTML уберите закрывающиеся теги /BR там где нужно.

    ОтветитьУдалить
  32. Вика, это в сайтбаре справа между картинкой (Iступень) и надписью (обучение).

    ОтветитьУдалить
  33. Tata, Я тут не пойму-у Вас 2 отдельных гаджета или это Вы так оформили заголовок гаджета- обучение. Если вариант 1- то я Вам давала ссылку, как уменьшить расстояние между гаджетами.
    Если второе, то тут или совсем убрать заголовок http://www.shpargalochki.ru/2014/06/ubrat-zagolovok-gadzheta.html

    или пробовать через стили CSS что-то такое смудрить h2.post-title{ margin: -30px 0px 0px 0px;} но не уверена что получиться.

    ОтветитьУдалить
  34. Вика, это я так оформила заголовок гаджета (.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;
    } может здесь можно что-то вставить? С уважением Тата.

    ОтветитьУдалить
  35. Вика, спасибо за подсказку я поменяла на margin: 0px 0px -10px 0px; и все получилось!!! Ура! Спасибо вам за ваше терпение и внимание! С уважением Тата.

    ОтветитьУдалить
  36. Tata, ну я рада, что помогло. Только писала вам ответ Вы уже сообразили.

    ОтветитьУдалить
  37. Вика, я тоже прихожу в восторг, когда что-то получается в этих для меня "абракадабрах" разобраться!

    ОтветитьУдалить

Пользовательский поиск