6 октября 2012 г.

Как в блоггере сделать фото кликабельным?


К сожалению в блоггере нет такой функции. При нажатии на фото мы обычно переходим на его полный размер. А иногда очень нужно, чтобы фотография являлась одновременно и ссылкой на пост или страницу.

На самом деле делается все просто. Только сразу не делайте, до конца дочитайте)))

Итак, как же сделать в blogger кликабельное фото или фото-ссылку?

1. Создаем сообщение. Вставляем фотографию. Допустим из веб-альбома picasa.



2. Открываем в новой вкладке страницу/пост, на которую должен переходить читатель при нажатии на фотографию. Копируем адрес (url) страницы (поста).

3. В новом сообщении переключаем режим на HTML. Для этого существуют две кнопки в левом верхнем углу панели инструментов. Вот они:

 Видите?

По умолчанию мы создаем сообщение в визуальном редакторе (кнопка "Создать"), а нам надо перейти в режим HTML. Просто нажимаем на кнопку.

4. Находим код картинки. Мой код титульной картинки выглядит так:

<a href="http://2.bp.blogspot.com/-93yYwd2WowI/UFmg8z4-CxI/AAAAAAAAD60/s9xVzY0B_dc/s1600/IMG_2810.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="http://2.bp.blogspot.com/-93yYwd2WowI/UFmg8z4-CxI/AAAAAAAAD60/s9xVzY0B_dc/s320/IMG_2810.jpg" width="320" /></a>


То, что выделено красным - это и есть адрес ссылки.  

Меняем его на нужный нам. Для этого просто выделяем его и нажимаем правой кнопкой мышки, выбираем "вставить".

Если мы хотим, чтобы ссылка открывалась в другой вкладке, можем сразу же после кавычек кода добавить вот этот код: target="_blank", тогда при нажатии на фото, нужная нам страничка откроется в новой вкладке.

Теперь полностью мой код картинки выглядит так:

 <div class="separator" style="clear: both; text-align: center;">
<a href="http://dushechki.blogspot.com/2012/09/blog-post_9171.html" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="http://2.bp.blogspot.com/-93yYwd2WowI/UFmg8z4-CxI/AAAAAAAAD60/s9xVzY0B_dc/s200/IMG_2810.jpg" width="200" /></a></div>

Выделенное голубым - это то, что я изменила в первоначальном коде.

5. Все. Переходим в режим "Создать" и продолжаем писать пост.  Наша картинка теперь ведет туда, куда нам надо)  Проверим? Жмем)



И второй способ. Самый легкий))) Спасибо, Юля!

Лена, спасибо большое!! Я очень и очень извиняюсь, но... можно проще.... Загружаем фотку из пикассы, кликаем на нее, чтобы она стала выделенной и нажимаем кнопочку "Ссылка" на верхней панели. Вводим в окошке адрес странички и все. Вот, тестовое сообщение, посмотри, пожалуйста. http://shulgan.blogspot.com/2012/10/blog-post_7084.html Только что создала. 


Юля, так действительно проще. Я подумала и поняла, почему я шла через коды, я еще меняла размеры фотографий. Видимо поэтому ручками правила и не дошло, что можно так просто!! ))

Однозначно надо побольше писать постов о фишках блоггера. Так можно много узнать нового!!! 


  ---------------------------------------------------

Надеюсь инфо будет вам полезной) 

А я , пока Саша летит к нам (в прямом смысле), потопала на кухню запекать с таким трудом найденный в Астане))) кусок свинины на косточке и печь шарлотку.  Я, конечно, еще тот кулинар))) Мой принцип - "быстро и легко". И сейчас я тоже выбрала такие рецепты. Но обещаю показать, что у меня получится))



23 комментария :

  1. Спасибо за подсказку, Елена! Я себе сохранила, наверняка когда-нибудь пригодится!

    ОтветитьУдалить
  2. Ой, спасибо большое за объяснение! А то я как-то раньше билась об стенку с этими картинками кликабельными :-))) А все, оказалось, не так и сложно :-) Еще раз спасибо!

    ОтветитьУдалить
  3. Лен, спасибо! У меня, вообще-то, технический кретинизм, но ты так хорошо и доходчиво объясняешь, что всё сразу понятно. Спасибо тебе!

    ОтветитьУдалить
  4. Лена, спасибо за ликбез, над попробовать!

    ОтветитьУдалить
  5. Лена, спасибо большое!! Я очень и очень извиняюсь, но... можно проще.... Загружаем фотку из пикассы, кликаем на нее, чтобы она стала выделенной и нажимаем кнопочку "Ссылка" на верхней панели. Вводим в окошке адрес странички и все. Вот, тестовое сообщение, посмотри, пожалуйста. http://shulgan.blogspot.com/2012/10/blog-post_7084.html Только что создала. Как то мн есовсем не удобно...

    ОтветитьУдалить
  6. Спасибо большое! Буду знать, может пригодится когда-нибудь)))

    ОтветитьУдалить
  7. спасибо, Леночка и Юля! вернусь, когда понадобится, а то память девичья)) а еще можно попросить? сделай плизззз МК как добавить закладки вверху. я читала у Катаринки, но у меня не получилось куда там идти и где создать(((

    ОтветитьУдалить
  8. Леночка, спасибо за такую полезную информацию :)

    ОтветитьУдалить
  9. Здорово! Очень полезно. Запомню :)

    ОтветитьУдалить
  10. а я знала про 2й вариант, но не знала про первый :) Спасибо :)

    ОтветитьУдалить
  11. Лена, спасибо за нужную инфо! Не знала такой возможности

    ОтветитьУдалить
  12. уррра! у меня получилось! спасобе тебе огромное! пошла про страницы изучать! чмоки-чмоки!!

    ОтветитьУдалить
  13. спасииииибо!!!! второй вариант то, что надо!

    ОтветитьУдалить
  14. Леночка, дорогая, спасибо тебе очередной раз за твои блоггер-уроки да еще и так удобно отсортированные. Вот раз, понадобилось - и подсмотрела :)

    ОтветитьУдалить
  15. Вчера вечером сидела и ломала голову, как сделать кликабельным фото. А потом зашла к тебе и за пару минут во всём разобралась. Спасибо тебе, Леночка!

    ОтветитьУдалить
  16. Лена, у Вас талант сложное объяснять ПРОСТО! Восхищаюсь Вами!

    ОтветитьУдалить
  17. Спасибо огромное, объяснение простое и понятное!

    ОтветитьУдалить
  18. с вставкой ссылки проблем нет а вот как сделать чтоб ссылка открывалась в этом же окне ? фото вставляю с подписью затем вставляю ссылку при клике на фото или подпись открывается новое окно. если удалить target="_blank", то при клике на подпись сылка открывается в том же окне а если кликать на само фото то в новом

    ОтветитьУдалить
  19. Спасибо огромное за инфо! Благодаря вам у меня всё получилось!!!

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

Спасибо за Ваш комментарий! ❤️