06.09.2012

Blogger Как вставить картинку на блог


Картинки, фото одно из самых востребованных зрелищ и на земле, и в интернете. Сколько создано восхитительных галерей! Вставить картинку на блог обязательно захочется рано или поздно. Потому, что самые комментируемые блоги — фото блоги, то есть те же картинки с натуры. Зрелищно, познавательно, легко воспринимается любой аудиторией. А если на картинке фото ваше личное? О! На себя любимого можно любоваться часами! Про детей и всяких котов-собак промолчу. Хотите вставить картинку на блог? Или сделать галерею? Или заставить картинки увеличиваться при нажатии? Или двигаться? Варианты решений для Blogger описаны в посте в максимально простом изложении (за редким исключением все сказанное работает и на WordPress).

 1- На Blogger вставить картинку на блог можно через редактор. Порядок действий: зайти в редактор - нажимаем в панеле управления знак Загрузить изображение — грузим картинку на блог с компьютера, или уже имеющуюся из нашего блога, или из интернета.


2- Что такое ссылка на изображение и как ее найти?
Ссылка это уникальный URL адрес картинки, ее место жительство в интернете (подробнее про URL адреса). Как только загрузили картинку на блог (еще до публикации) — можно переключится на HTML и найти ссылку на изображение, которую Blogger создал при загрузки. Выглядит это так. Ссылку полезно знать, пригождается для работы (выделена красным):
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-EPr1BfYUUjQ/UEheID7b9hI/AAAAAAAAAwM/FeHgXltZfEU/s1600/poleznosti-blogger-0609-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://4.bp.blogspot.com/-EPr1BfYUUjQ/UEheID7b9hI/AAAAAAAAAwM/FeHgXltZfEU/s1600/poleznosti-blogger-0609-1.jpg" width="320" /></a></div><br />

3- Как узнать ссылку на чужую картинку?
Нажмите на понравившееся мышкой. В большинстве случаев вас перебросит на другую страницу в отдельном окне и в адресной строке вверху будет видна нужная ссылка — адрес.

4- Как вставить картинку на блог и сменить размер картинки на Blogger? Размер вставленной картинки на блог можно сменить используя стандартные функции Blogger. Порядок действий — редактор - нажмите левой мышкой на картинку — высветится внизу длинная синяя полоса — меню — выбираем один из размеров — нажимаем.
Размер картинки на блоге Blogger можно сменить и в редакторе в HTML, если прямо в кодах пропорционально (чтобы не исказить изображение) изменить размеры ширины и высоты (в примере выше выделено зеленым).

5- Как заставить вставленную картинку на блоге увеличиваться при нажатии? Достаточно просто. Вставляем картинку на блог в двух экземплярах — первый маленький для поста (я делала сразу размер 100* 75), а второй истинный размер во всей красе. Действуем по формуле, создаем коды для своих картинок. Любуемся своим произведением. Ссылки берем из п.1

<a href="ССЫЛКА НА БОЛЬШУЮ КАРТИНКУ" target=_blank><img src="ССЫЛКА НА МАЛЕНЬКУЮ КАРТИНКУ" border="0" width=100 height=75></a>
Так можно сделать и шуточные приколы с неожиданными метаморфозами: нажал на цветочек, а выскакивает волк!

6- Как менять месторасположение вставленной картинки на блог? Месторасположение картинки в посте можно сменить используя стандартные функции Blogger. Порядок действий - нажмите левой мышкой на картинку - высветится внизу длинная синяя полоса - меню - задаем месторасположение: справа, посередине, слева - нажимаем. Чтобы эта функции работала, всегда надо сначала писать текст поста, а потом в подходящее место вставлять картинку (дополнительно можно посмотреть видео, как работать с картинками). (Можно прописывать расположение картинки сразу в кодах, если заранее уверены, где именно надо вставить картинку на блог).

7- Как вставить картинки на блог в горизонтальный ряд?
Можно сделать просто, что называется, «в лоб», через пробелы между картинками. В примере я привычным методом Blogger вставляю картинки, нахожу в HTML коды их, вставляю между кодами статические пробелы &nbsp;  . В примере подряд стоит четыре пробела.

  
8- Можно более надежно и цивилизованно вставить картинки на блог в строку, то есть создать целую галерею, используя формулы для создания таблиц. Пример формулы: стоят 4 картинки в 1 строке в 2 колонки без границ. Готовые коды берем из п.5 

<table border="0"cellspacing="1"cellpadding="1" width="100%"><tr>
<td>КОД 1 </td><td>КОД 2 </td><td>КОД 3 </td><td>КОД 4</td> </tr></table>

Созерцаем галерею. Нажимаем. Восхищаемся собой.

9- Как заставить картинки из галереи на Blogger двигаться? Используем формулу движущейся строки:
<marquee>ТЕКСТ или КОД </marquee>
В качестве кода вставляем весь HTML код галереи из п.8
Не могу судить, насколько это функционально и интересно, но работает


10- Как сделать фон под картинку или галерею?
Отдельно загружаем свой или выбираем в интернете фон и картинки. Находим ссылки. Действуем по формуле. Ссылку на фон с анимацией я нашла заранее. Код - беру весь код п.8. Размер = 100*4 +50 побольше размеров галереи установила.

<table background="ССЫЛКА НА ФОН"<tr><td width="450">КОД</td></tr></table>

На сегодня закончу
Код моей галереи

Всего доброго вам и вашим блогам


       За Счастье пусть пьют Дураки! Мы выпьем за Чудеса      
  Присоединяйтесь ко мне в Блог  и Видеоканал      
  Понравилась  статья? - Жмите на кнопочки и пишите комментарии  
   

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

  1. спасибо что-то выберу и для себя

    ОтветитьУдалить
    Ответы
    1. а как сделать чтоб при нажатии на картинку не открывалась в новом окне просто картинка - там увеличивалась не переходя в новое окно ну типа того

      Удалить
    2. Да - делала такое, поищу, правда, как утверждают Мастера, такое плохо для блога

      Удалить
  2. Света! прекрасно расписала.
    Умничка!

    ОтветитьУдалить
  3. Светлана я умею вставлять картинку в блог, но твоя инфо очень интересна, спасибо тебе!

    ОтветитьУдалить
  4. Светлана, Вы всегда даете интересную и полезную информацию, которую очень просто применять!!! Спасибо Вам!!!

    ОтветитьУдалить
  5. Полезнейшая информация. Моя перепечатка переработанная для Джулии http://www.myjulia.ru/post/552204/?tm=5825

    ОтветитьУдалить
    Ответы
    1. Творческая переработка получилась, с интересными приемами

      Удалить
  6. Вроде умею вставлять картинку, но у тебя столько всего!
    "Полезности" оправдывает свое название!
    Светлана, спасибки))))

    ОтветитьУдалить
  7. Очень познавательно, спасибо)))

    ОтветитьУдалить
  8. Мне понравились картинки и рекомендации по их установке

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

    ОтветитьУдалить
    Ответы
    1. Ева просмотрела ваши прекрасные, просто замечательные работы! Какой талант!
      На блогах подписи стоят нормально, а чтобы подсказать - надо увидеть "ненормальные" . Покажите. Можно здесь.
      Можно через почту или через скайп
      Координаты есть на визитке

      Удалить
  10. Этот комментарий был удален автором.

    ОтветитьУдалить
  11. Почему-то не удаётся перетаскивать картинку,и синяя полоска не появляется с функциями.

    ОтветитьУдалить
    Ответы
    1. Ева, можно видео посмотреть по теме -- есть на странице Уроки

      Удалить
  12. Спасибо.смотрела и видела там полоску.Жму на мои фотки и ничего не появляется

    ОтветитьУдалить
    Ответы
    1. Этот комментарий был удален автором.

      Удалить
    2. Остается один вариант - нажать на Обучение справа вверху

      Удалить
  13. Спасибо,жму везде,пока без результата.

    ОтветитьУдалить
    Ответы
    1. Ева - давайте встретимся - скайп svetasad54

      Удалить
  14. Спасибо,через несколько дней.Пока не могу,нет времени

    ОтветитьУдалить
  15. Светлана,спасибо за помощь.С трудом,методом тыка смогла найти синюю полоску,нажав случайно на панели инструментов "Создать",и она сразу материлизовалась.
    Теперь вопрос о сохранении фото на рабочем столе,у меня было в ipeg,сейчас почему-то сохраняется в bmp,как их перевести в ipeg?
    Извините за вопросы

    ОтветитьУдалить
    Ответы
    1. Я просто меняю формат, то есть расширение, у картинки на нужное мне и сохраняю

      Удалить
  16. Спасибо,я совершенный лопух и не знаю как поменять формат.

    ОтветитьУдалить
  17. Светлана, благодарю Вас за всё! Я заглянула к Вам по совету доброй знакомой Ларисы Плыс. Она мне и пообещала, что я не пожалею. И я просто восхищена! Полный восторг! Вы такой спец!
    Я новичок, у меня тоже блог, ему всего-то идёт 3-я неделя)))
    Я создала его путём "тыка"–эксперимента, и назвала так же, потому что название Полезности" сидело в голове уже около года)).
    Но я профан, что могу, то и делаю. Толком не пойму даже, как здесь в Круги добавляются)) Не пробовала ещё. В основном, пишу от души разные разности, потому что так много интересного знаю, пережила, видела, что меня просто переполняет инфа! Надеюсь помочь кому-то. И вот уже пару дней хочу сделать галерею фотографий к рассказу, не знала, куда мне и пойти с такими вопросами.

    И тут Вы!!!
    Верно говорят, что Учитель приходит тогда, когда Ученик уже готов!

    Я Вам так благодарна! Не знаю, что у меня получится, но теперь смогу попробовать, – всё у Вас разложено по полочкам! Восхищена Вашей полезностью людям!
    Удачи Вам и процветания Вашему Блогу!

    ОтветитьУдалить
    Ответы
    1. Благодарю вас, Виктория, за теплые слова. Тронута. А Лариса Плыс мой Учитель - ей отдельное спасибо

      Удалить
  18. Светочка, сколько полезностей. Срасибо!

    ОтветитьУдалить
  19. Вот уж и вправду говорится, Век живи и век учись. А я то думала что знаю о встраиваимости картинок все. Ан НЕТ! Спасибо большое за пост и советы взяла на вооружение!

    ОтветитьУдалить
  20. Добрый день! Подскажите, пожалуйста, что нужно сделать, чтобы около краткого сообщения на главной странице была маленькая картинка, а когда нажимаешь на кнопку "Дальше" она становилась большой?

    ОтветитьУдалить
  21. Светлана!!! Столько информации и так чудесно преподнесана, столько фишек! Спасибо Вам! Все взяла на вооружение и пошла применять. Успехов Вам и большой Удачи!

    ОтветитьУдалить
  22. Спасибо за статью, благодаря таблицам сделала себе меню из картинок, и хочу поделиться своей находкой как вставить две картинки рядом не используя коды, может будет и вам полезна - http://trizza-handmade.blogspot.com/2013/07/blogger.html

    ОтветитьУдалить
  23. Этот комментарий был удален автором.

    ОтветитьУдалить
  24. Как всё сложно! )) Светлана, а если при клике левой мышкой на картинку внизу длинная синяя полоса — меню вообще не появляется? Что не так? И ещё всё норовит боком загрузиться, хотя на рабочем столе всё нормально! ))

    ОтветитьУдалить
    Ответы
    1. Татьяна, спокойно и аккуратно повторить действия. Блоггер - это просто. Надо один раз очень внимательно все проделать и будет получаться

      Удалить
  25. Добрый вечер! Мучаюсь с текстом на главной. Изменив размеры боковых панелей текст у меня начал писаться не под картинкой, а справа, заполняя пространство. Не подскажете как вернуть обратно не изменяя размеров боковых панелей?lengilochka.blogspot.com

    ОтветитьУдалить
  26. Попытаюсь сделать у себя в блоге

    ОтветитьУдалить
  27. Здравствуйте. А подскажите пожалуйста. Почему я не могу создавать новые страницы? Страница просто не сохраняется. Очень буду признателен за ответ. Спасибо. http://www.comicsmarvel.ru/

    ОтветитьУдалить
  28. Здравствуйте, Светлана! Не получается вставить картинку в блог!!! Причём, некоторые я вставляла, как указано у вас в первом пункте, а теперь почему- то не добавляет?! Работаю на планшете, хочу добавить свои фото из планшета тоже. Может что подскажите? Буду рада !

    ОтветитьУдалить
  29. Здравствуйте, Светлана! Никак не могу вставить картинку в блог. Пробовала разными способами: и с компа, и с интернета, и по ссылкам. НИКАК!!! Может что в настройках надо изменить. Подскажите, пожалуйста, в чем может быть проблема.

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