Google Мой путь к успеху!: Создание блога на Blogger. Урок 8. Как вставить изображения в пост

среда, 29 августа 2012 г.

Создание блога на Blogger. Урок 8. Как вставить изображения в пост

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


В своем посте «Как вставить картинку в блог» я описала процесс вставки в статью изображения с помощью соответствующей иконки. Однако, более правильно с точки зрения СЕО оформить вставку несколько иначе. Кроме того, часто бывает нужно сделать картинку ссылкой, либо вставить целую серию картинок.

Мини-галерея на Blogger

Галерея на Blogger


    1. Закачаем ваши изображения на webpicasa.

    2. Входим на Ваш блог, в режим нового сообщения. Переходим во вкладку HTML и находим место, где должна находиться Ваша галерея.

    3. Туда вставляем этот код:

    <table align="center" cellpadding="15" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: justify;"><tbody>
    <tr><td align="center"><img alt="Альтернативный текст 1" height="240" rel="nofollow" src="URL 1" target="_blank" title="Название картинки 1" width="320" /></td>
    <td align="center"><img alt="Альтернативный текст 2" height="240" rel="nofollow" src="URL 2" target="_blank" title=" Название картинки 2" width="320" /></td></tr>
    <tr><td align="center"><span style="font-family: 'Times New Roman'; font-size: 10pt;"> Подпись 1</span></td>
    <td align="center"><span style="font-family: 'Times New Roman'; font-size: 10pt;"> Подпись 2</span></td></tr>
    </tbody></table>

    Мини-галерея на Blogger

    На скриншоте я подчеркнула те фрагменты текста, которые мы будем менять.

    4. Переходим в альбомы webpicasa. Допустим, я загрузила картинки, подготовленные для статьи, в альбом под названием «29 августа 2011 г.».

    5. Войдем в этот альбом и найдем там первую из картинок. Кликаем по ней левой кнопкой мыши, а затем уже правой кнопкой кликаем на появившемся отдельном изображении и выбираем в контекстном меню «Копировать URL картинки» (на скриншоте я пометила это «1»). Вам также понадобятся размеры картинки (помечено «2»), запишите их. 
    Мини-галерея на Blogger

    6. Возвращаемся к Вашему сообщению, выделяем URL 1 и заменяем его на тот URL, что Вы скопировали.
    (Для тех, кто не знает, как это сделать: выделяем, например, держа зажатой левую кнопку мыши, отпускаем кнопку и нажимаем одновременно клавиши Ctrl и V.
    Если кто-то делает выделение и вставку по-другому, делайте так, как привыкли, я написала один из вариантов).

    7. Теперь Вам нужно заменить альтернативный текст и название картинки. Это может быть один и тот же текст, или разные.
    Допустим, я «Альтернативный текст 1» заменю на «Высказывание де Голля», а «Название картинки» на «Мой девиз».

    8. Посмотрите теперь на размеры своей картинки и сделайте изменения, если необходимо. «По умолчанию» у меня заданы такие размеры картинок: ширина – 320 пикселей (width="320"), высота – 240 пикселей (height="240").
    Я отобрала для галереи картинки одинакового размера: 490×240 пикселей, то есть ширина картинок больше заданной в коде. Чтобы сохранить пропорции и не деформировать изображения, меняем в коде высоту во столько же раз, во сколько 490 меньше 320 (надеюсь, математику Вы еще не забыли :) ), т.е. примерно в 1,5 раза. Значит, исправляем в коде height="240" – 240 на 157.

    9. Теперь то же самое проделываем со второй картинкой.

    10. Если у Вас предусмотрены подписи к картинкам, то заменяете в коде «Подпись 1» и «Подпись 2» на правильные и смотрите на творение рук своих (перейдя на вкладку Создать или Просмотр).
    Мини-галерея на Blogger
    Если же подписи не предусмотрены, то часть кода:

    <tr><td align="center"><span style="font-family: 'Times New Roman'; font-size: 10pt;"> Подпись 1</span></td>
    <td align="center"><span style="font-family: 'Times New Roman'; font-size: 10pt;"> Подпись 2</span></td></tr>

    можете спокойно удалить.

    11. Посмотрев на свой пост, я вижу, что картинки у меня сместились вправо и заехали на сайдбар.

    Мини-галерея на Blogger

    У Вас может быть то же самое, а может все быть так, как надо. Это зависит от ширины блога и ширины, отведенной под контент.
    Чтобы немного поправить расположение галереи, я изменю в коде align="center" на align="left", то есть сдвину ее влево, и сделаю cellpadding="3". Результат получился вполне приемлемый, так пока и оставлю.

    Но что это за галерея из двух картинок? Давайте добавим еще 4.

    12. Чтобы добавить 2 картинки, скопируем код:

    <tr><td align="center"><img alt="Альтернативный текст 1" height="240" rel="nofollow" src="URL 1" target="_blank" title="Название картинки 1" width="320" /></td>
    <td align="center"><img alt="Альтернативный текст 2" height="240" rel="nofollow" src="URL 2" target="_blank" title=" Название картинки 2" width="320" /></td></tr>
    <tr><td align="center"><span style="font-family: 'Times New Roman'; font-size: 10pt;"> Подпись 1</span></td>
    <td align="center"><span style="font-family: 'Times New Roman'; font-size: 10pt;"> Подпись 2</span></td></tr>

    и вставим его перед строчкой:
    </tbody></table>

    13. Повторим п.5-10 для этих двух картинок.

    14. Чтобы вставить еще 2 картинки, повторим пункты 12-13.


Вставка одиночной картинки

(либо нескольких картинок, но выстроенных в ряд по вертикали).

    1. Найдите место, где должна быть картинка и вставьте такой код:

    <img alt="Альтернативный текст" border="1" height="480" rel="nofollow" src="URL картинки" target="_blank" title="Название картинки" width="640" />

    2. Проделайте действия 4-8 с учетом того, что здесь установлены другие значения ширины и высоты картинки.


Как сделать картинку ссылкой


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

Для этого я на место картинки вставлю такой код:

<a href="URL страницы, на которую нужно перейти" target="_blank" rel="nofollow"><img title="Название картинки" src="URL картинки" alt="Альтернативный текст" width="320″ height="240″ /></a>

и поменяю в нем все, что необходимо.


Нажмите на картинку - скриншот блога и Вы попадаете на мой второй блог.

На этом я заканчиваю наш урок. Успехов Вам!



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

  1. Ирина Сухарева29 августа 2012 г., 9:26

    Нина, как давно я не посещала твой блог! Молодец. что продолжаешь писать , учишь, даешь советы, меня это радует.Я немного выпала из калеи , а побывав на твоем блоге опять захотелось что -нибудь делать.Ну для начала реанимировать свой блог, а то я его забросила!

    ОтветитьУдалить
  2. Ира, я рада твоему посещению. Я тоже на некоторое время забросила все свои блоги, а потом решила, что надо делиться тем, что умею. Пусть это не такие уж сложные вещи, но кому-то все равно может пригодиться.
    И ты правильно захотела свой блог реанимировать. У тебя всегда были интересные статьи.

    ОтветитьУдалить
  3. Ольга Бисярина23 мая 2013 г., 18:27

    Спасибо, Нина! Я на Ваш сайт зашла случайно и нашла то, что и в платных курсах не найдёшь, да и написано всё подробно и понятно - как раз для таких "чайников", как я. Буду изучать сайтостроение по Вашим урокам.

    ОтветитьУдалить
    Ответы
    1. Очень хорошо, Ольга! Изучайте и успехов Вам в сайтостроении!

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

    ОтветитьУдалить
    Ответы
    1. Как я только не вставляла эти картинки! И так, как Вы, - тоже! Но мне нужно было, чтобы они вставились с зазором, чтобы можно было к каждой из них подпись сделать. Так что Ваш метод удобен для одних случаев, мой метод - для других.
      И спасибо за напоминание, что так тоже можно вставлять картинки. Честно говоря, про такой способ я забыла :)

      Удалить
  5. Нина здравствуйте!
    Уже полгода пользуюсь этим постом для создания галерей в своем блоге.
    пример http://myblogyanaa.blogspot.ru/2013/06/brookes-boks.html
    Хотела спросить, почемуто у меня под фоткой не видно названия картинки. Хотя я пишу и альтернативный текст и название картинки, в чем тут может быть проблема?

    ОтветитьУдалить
  6. Яна, вероятно, потому, что Вы не вставляете подпись. Название картинки - это не подпись. Посмотрите, в первом варианте у меня про подпись сказано.
    Что нужно сделать теперь, чтобы подпись появилась: войти в режим редактирования поста, нажать на картинку, появится строчка меню редактирования картинки, в которой ближе к конца есть пункт "Добавить подпись". Нажимаете на него, пишете подпись и все.
    За полгода нужно было давно уже этот вопрос задать, чтобы не пришлось много исправлять.

    ОтветитьУдалить
  7. Да чесно сказать, недавно обратила внимание
    Ничего страшного, новый месяц начну по новому.
    Впереди еще пол года!

    Спасибо большое! Полезная информация, доходчиво и наглядно красиво ))
    Мне нравится!

    ОтветитьУдалить
    Ответы
    1. Мне нравится Ваш подход :)
      Спасибо за хороший отзыв о моем блоге.

      Удалить
  8. есть ли код для автоматической подписи каждой заливаемой в блог картинки?

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

      Удалить