При добавлении картинки в блог Блоггер создает ее HTML-код, который можно посмотреть и исправить при редактировании сообщения в режиме "HTML".
Картинка в HTML имеет вид <img src="адрес" />.
Параметр src - адрес файла картинки.
После "адреса" можно вставлять нужные параметры - центрирование, размеры, рамка, описание и т.п.
Кстати, если вам надо вставить не просто картинку, а такую, чтобы при нажатии на нее осуществлялся переход по какому-то адресу, то об этом здесь.
Как я понимаю, минимально код должен выглядеть так:
<a href="URL"><img src="адрес_картинки" width="ширина_картинки" height="высота_картинки" alt="описание картинки"/></a>
По умолчанию в Блоггере картинка ставится со ссылкой на адрес ее полноразмерного варианта в Веб-альбоме Пикаса и ее месторасположение на странице блога (лево, центр, право), с рамкой вокруг картинки.
Вот тут я вставляю свою картинку из веб-альбома Пикаса:
Ее код такой:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s1600/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s320/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" width="320" /></a></div>
Расшифровка некоторых параметров (взята мною из "Шпаргалки блоггера")
Параметр border - толщина рамки вокруг картинки. По умолчанию ставится в том случае, если картинка является ссылкой (а у Блоггера это всегда), при этом border="0".
<img src="адрес" border="0" />
Если хотите поменять толщину, стиль или цвет рамки, то можно поставить нужные параметры, например border: 2px solid # 992211 даст рамку толщиной в 2 пикселя стиля "жирный" синего цвета.
Стиль рамки может быть таким:
solid - жирная
double - двойная линия
groove - объемная "тень"
ridge - объемная "тень"
Параметр /s1600/ или /s320/ в адресе - определяет размер картинки по длинной стороне.
Т.е. изменив значение здесь, можно вставить картинку не только как предлагается "маленький, средний, крупный, очень крупный, исходный". Если выбрать "исходный размер", картинка умещается в ширину сообщения.
Значения могут быть такими: s1600 (соответствует "исходный размер"), s800, s600 (очень крупный), s512, s400 (крупный), s320 (средний), s200 (маленький), s150, s144, s150, s72-с (для гаджета "Популярные сообщения"), s64, s48.
-с после цифр добавляется, если нужно, чтобы изображение было квадратным. Иначе оно пропорционально уменьшается-увеличивается. Не рекомендуется использовать большие значения, если размер исходного изображения меньше - картинка будет нечеткой.
Параметры width и height обязательные, они задают ширину и высоту картинки, видимой в блоге.
Их нет при выборе варианта вставки картинки "Исходный размер".
Нужны для того, чтобы браузеру не нужно было определять размеры картинки - это ускоряет загрузку.
В Блоггере автоматически не формируется один из очень важных параметров - alt, который вообще-то является обязательным для кода изображения. Его можно вставлять вручную при редактировании HTML.
Картинка в HTML имеет вид <img src="адрес" />.
Параметр src - адрес файла картинки.
После "адреса" можно вставлять нужные параметры - центрирование, размеры, рамка, описание и т.п.
Кстати, если вам надо вставить не просто картинку, а такую, чтобы при нажатии на нее осуществлялся переход по какому-то адресу, то об этом здесь.
Как я понимаю, минимально код должен выглядеть так:
<a href="URL"><img src="адрес_картинки" width="ширина_картинки" height="высота_картинки" alt="описание картинки"/></a>
По умолчанию в Блоггере картинка ставится со ссылкой на адрес ее полноразмерного варианта в Веб-альбоме Пикаса и ее месторасположение на странице блога (лево, центр, право), с рамкой вокруг картинки.
Вот тут я вставляю свою картинку из веб-альбома Пикаса:
Ее код такой:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s1600/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s320/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" width="320" /></a></div>
Расшифровка некоторых параметров (взята мною из "Шпаргалки блоггера")
Тег </div> определяет место
расположения изображения.
<div style="text-align: center;">.....</div>
Параметр text-align указывает центрирование картинки, напр.,
text-align:
center означает, что картинка расположена по центру.
Параметр border - толщина рамки вокруг картинки. По умолчанию ставится в том случае, если картинка является ссылкой (а у Блоггера это всегда), при этом border="0".
<img src="адрес" border="0" />
Если хотите поменять толщину, стиль или цвет рамки, то можно поставить нужные параметры, например border: 2px solid # 992211 даст рамку толщиной в 2 пикселя стиля "жирный" синего цвета.
Стиль рамки может быть таким:
solid - жирная
double - двойная линия
groove - объемная "тень"
ridge - объемная "тень"
Параметр /s1600/ или /s320/ в адресе - определяет размер картинки по длинной стороне.
Т.е. изменив значение здесь, можно вставить картинку не только как предлагается "маленький, средний, крупный, очень крупный, исходный". Если выбрать "исходный размер", картинка умещается в ширину сообщения.
Значения могут быть такими: s1600 (соответствует "исходный размер"), s800, s600 (очень крупный), s512, s400 (крупный), s320 (средний), s200 (маленький), s150, s144, s150, s72-с (для гаджета "Популярные сообщения"), s64, s48.
-с после цифр добавляется, если нужно, чтобы изображение было квадратным. Иначе оно пропорционально уменьшается-увеличивается. Не рекомендуется использовать большие значения, если размер исходного изображения меньше - картинка будет нечеткой.
Нужны для того, чтобы браузеру не нужно было определять размеры картинки - это ускоряет загрузку.
В Блоггере автоматически не формируется один из очень важных параметров - alt, который вообще-то является обязательным для кода изображения. Его можно вставлять вручную при редактировании HTML.
Тег </alt> - текст, который будет виден, если изображение по каким-то причинам не появилось. Он важен для поисковиков, помогая им индексировать картинки.
<img src="адрес" border="0" alt="описание картинки" />
<img src="адрес" border="0" alt="описание картинки" />
При выборе варианта "Исходный размер" этого параметра нет.
Параметры title и alt тоже рекомендуется вставлять вручную.
Title нужен для того, чтобы при наведении мыши на картинку появлялся текст.
Аlt нужен для словесного описания картинки (если, например, по какой-то причине она не загрузилась или для вставки в некоторые соцсети).
Для поисковиков это один из важнейших параметров картинки.
<img src="адрес" border="0" alt="описание картинки" title="описание картинки" />
Параметры title и alt тоже рекомендуется вставлять вручную.
Title нужен для того, чтобы при наведении мыши на картинку появлялся текст.
Аlt нужен для словесного описания картинки (если, например, по какой-то причине она не загрузилась или для вставки в некоторые соцсети).
Для поисковиков это один из важнейших параметров картинки.
<img src="адрес" border="0" alt="описание картинки" title="описание картинки" />
А вот та часть кода, которую я выделила красным, является ссылкой на исходное изображение в веб-альбоме Пикаса. Именно она дает возможность при нажатии на картинку в блоге перейти к просмотру ее полноразмерного варианта. Но, как я уже писала в посте "Какими должны быть ссылки в блоге", для оптимизации блога плохо большое число исходящих ссылок. Из этих соображений ссылку на картинку лучше убирать.
Теперь приведем нашу картинку к виду, который выполняет рекомендации по оптимизации блога из поста "Какими должны быть картинки в блоге".
Меняем HTML картинки на такой:
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="480" src="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s600/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" width="600" /border="0" alt="елочные игрушки" title="Елочные игрушки" / ></div>
У нас осталась еще одна проблема - имя файла. Картинки названа на русском языке, поэтому имя отображается в виде ужасных корябушек :) По-хорошему, картинку на диске надо переименовать в соответствии с требованиями, а уж потом вставлять в веб-альбом.
Вот что у нас получилось:
Теперь приведем нашу картинку к виду, который выполняет рекомендации по оптимизации блога из поста "Какими должны быть картинки в блоге".
Меняем HTML картинки на такой:
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="480" src="http://4.bp.blogspot.com/-M6sLaxFVyuA/TzJlodOtyBI/AAAAAAAAGj4/D06B03JP86A/s600/108_%25D0%25B5%25D0%25BB%25D0%25BE%25D1%2587%25D0%25BD%25D1%258B%25D0%25B5+%25D0%25B8%25D0%25B3%25D1%2580%25D1%2583%25D1%2588%25D0%25BA%25D0%25B83.JPG" width="600" /border="0" alt="елочные игрушки" title="Елочные игрушки" / ></div>
У нас осталась еще одна проблема - имя файла. Картинки названа на русском языке, поэтому имя отображается в виде ужасных корябушек :) По-хорошему, картинку на диске надо переименовать в соответствии с требованиями, а уж потом вставлять в веб-альбом.
Вот что у нас получилось:
Другие посты о том, что касается вставки изображений в блог, можно увидеть здесь:
Спасибо, поучительно!
ОтветитьУдалитьРада, что заинтересовало :)
ОтветитьУдалитьЗдравствуйте!
ОтветитьУдалитьОгромное спасибо, Татьяна, за столь исчерпывающую информацию.
Успехов вам!
У меня почему-то по-другому код выглядит:-( Не понимаю. Вот у меня вопос: а если я прямо с компьютера в блог загружаю фотографии? Или лучше сначала все-таки на диск копировать, а потом уже на блог?
ОтветитьУдалить"С компьютера" вы имеете ввиду из интренета? Т.е. с других блогов и сайтов? В этом случае, конечно, лучше скопировать к себе на компьютер, на жесткий диск. И вставлять уже с него. Иначе если с сайтом-источником что-то произойдет (например, он станет недоступен, переедет по другому адресу или хозяин просто удалит это фото), то ваше фото из блога тоже пропадет.
УдалитьКстати, хочу напомнить, что при копировании с чужих блогов надо еще не забывать об авторских правах. Используя чужое изображение обязательно нужно указывать ссылку на источник, иначе это считается плагиатом.
А насчет кода картинки - то он может чуть-чуть отличаться. Зависит от того, какие параметры вы используете, а какие нет. Это надо более подробно изучать HTML. Но, честно говоря, Блоггер сейчас уже дает достаточные инструменты для правильного оформления кода изображения (можно заполнять альт и тайтл прямо в редакторе), поэтому я считаю, что информация из этого поста теперь нужна больше для общего развития, а не как руководство к действию :)
Таня, спасибо большое за ответ! Я имела ввиду, если я загружаю свое фото со своего компьютера, без загрузки его в Picasa. Я честно сказать, не очень поняла, зачем это делать, если я, например, не пользуюсь этим сервисом.
УдалитьС любом случае Вы дали достаточно исчерпывающий ответ! Спасибо еще раз!
Извините, неправильно поняла вопрос)
УдалитьТогда все просто - в Блоггере при загрузки картинок со своего компьютера изображения все равно помещаются в веб-альбом Пикасса, который дается по умолчанию. Достаточно просто посмотреть адрес уже вставленных изображений - и вы увидите, что они хранятся там, а не на вашем компьютере. Поэтому разницы нет никакой. Просто бывает удобнее размещать картинки самостоятельно по каким-то своим соображениям. Я, например, пользуюсь Пикассой для предварительной обработки фото, поэтому и выкладывать в блог мне удобнее через нее.
Если же не иметь ввиду Блоггер, то вставка изображений с фотохостинга может быть полезна в том случае, если у вас под блог выделяется определенное количество места (т.е. если вам выделено жестко какое-то количество гигабайт). Тогда, чтобы его зря не расходовать, фото нужно вставлять просто ссылками на другие ресурсы (Например, Яндекс.Фотки и т.п.). Такое требование обычно стоит на всех форумах - они экономят место и скорость загрузки.
Надо же как! Спасибо!
УдалитьА как сделать чтобы при появлении второй картинки по нажатию на первую был возврат обратно???
ОтветитьУдалитьНе поняла вопроса...
УдалитьМне очень хочется вставлять фото как у вас .В верхнем левом углу значок pin it. Я в Pinterest зарегистрировалась ,а фото не могу сообразить как вставить в блог.
ОтветитьУдалитьТатьяна! Объясните пожалуйста, как вставить фото из Пикаса 3 в Блог. Я загрузила Пикаса в свой компьютер. Обработала несколько фото. А когда загружала их в сообщение, то фото загрузились не обработанные. Похоже, они загрузились не из Пикаса 3. Загружаются они совсем маленькие, а я хочу большие.Наталья.
ОтветитьУдалитьПрямо из программы Пикаса нажмите на нужное фото правой кнопкой и выберите "Добавить в веб-альбомы Пикаса". Там же можно будет выбрать размер вставляемого изображения.
УдалитьКак вставить под картинку фон анимацию?
ОтветитьУдалить