При добавлении картинки в блог Блоггер создает ее 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" />
Параметр /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" />
Параметр /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).
<img src="адрес" border="0" alt="описание картинки" title="описание картинки" />
Параметр title тоже рекомендуется вставлять вручную. Он нужен для того, чтобы при наведении мыши на картинку появлялся текст. Для поисковиков это тоже один из важнейших параметров картинки (так же как и alt).
<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>
У нас осталась еще одна проблема - имя файла. Картинки названа на русском языке, поэтому имя отображается в виде ужасных корябушек :) По-хорошему, картинку на диске надо переименовать в соответствии с требованиями, а уж потом вставлять в веб-альбом.
Вот что у нас получилось:
Другие посты о том, что касается вставки изображений в блог, можно увидеть здесь:
0 коммент.:
Отправить комментарий