.jpg)
В данном посте отвечу на вопрос как добавлять в блог изображения с превью – чтобы в тексте картинка была маленькая, а при клике открывалась увеличенная и в новом окне. Для начала расскажу о том как вставить изображение в пост. Есть несколько способов. Во-первых, в самим текстовом редакторе существует специальная кнопка для вставки картинок: После клика на ней появляется всплывающее окно с настройками вставляемого изображения. Выбираем источник – либо это локальный компьютер, либо картинка из Интернета, далее определяем расположение ее в тексте (справа, слева, по центу) и указываем размер (малый, средний, большой). Затем нажимаем на кнопку «Загрузить изображение». Картинка будет сохранена в ваш персональный альбом сервиса Picasa от Google, который предоставляет возможность хранения изображений. Вместе с этим картинка появится в самом посте. Причем в тексте статьи она будет такого размера, как вы выбрали в настройках при ее добавлении, а после клика на ней, откроется в полный размер в новом окне. Метод второй – вставка изображения вручную. Здесь также фигурирует сервис Picasa. Перед тем как добавить картинку в блог, загружаем ее в галерею. Есть возможность группировать фотки в категории, чем лично я и пользуюсь – изображения с разных блогов хранятся в разных разделах. Итак, находим нужную нам фотографию, кликаем на ней и попадаем на страницу с подробным описанием, где можно добавить теги, переместить в другой альбом, а также получить ссылку на изображение. Для начала нам потребуется выбрать какой размер картинки мы хотим получить. В системе есть несколько форматов – миниатюра (ширина = 144 пикселя), маленький (288 пикс.), средний (400 пикс.) и большой (800 пикс.). Признаться, не знаю как сервис ведет себя с фотками больше 800 пикселей, есть ли возможность их загружать. Мне для блога размера 800 хватает с головой. Далее копируем ссылку. Обратите внимание, что я использую поле «Вставить изображение», а не «Ссылка», поскольку последнее ссылается на картинку внутри Picasa, то есть отображаться она будет в интерфейсе галереи. Поэтому я выбираю поле с кодом и получаю что-то вроде такого: В третьей версии Picasa добавляет к изображению просто уйму ненужного кода, включая ссылку на автора альбома. Берем из всего текста лишь тэг с изображением (img), который можно вставить в блог. Удостоверьтесь, что в текстовом редакторе установлен режим HTML. Для тех, кто не знает HTML и CSS данный метод, конечно, мало применим, но мне нравится больше первого. Здесь есть больше возможностей по управлению расположением картинки. Для каждого поста я публикую небольшое изображение по теме дабы добавить немного красоты, причем устанавливаю выравнивание по правому краю. Кроме того, добавляю в код свойство alt – которое выводит на странице альтернативный текст, если в браузере отключены фотки. Это, во-первых, дополнительный плюс для читателей блога, а, во-вторых, возможность получить немного трафика с поиска по изображениям Google. Все эти действия осуществляю с помощью примерно следующего текста:
style="float: right; margin-left: 5px;" alt="Список Google гаджетов в Blogspot"
Как это выглядит на сайте можете посмотреть в коде страницы для любого поста. По-моему, намного красивее и компактнее стандартной вставки, причем более функционально. Чтобы заставить увеличенное изображение открываться в новом окне, сделаем следующее. Обратите, пожалуйста, внимание на ссылки: Это одно и то же изображение, но передается с разным размером – первый вариант 800 пикселей, второй – 144. Зная данную особенность, можно легко для каждой картинки вставлять следующий код:
В следствии чего получим в посте миниатюрное изображение, при клике на которое будет открываться его большой вариант в новом окне. Например: Кстати, это работа Джонатана Вонга (Jonathan Wong) – восемнадцатилетнего ирландского дизайнера. Если есть какие-то вопросы, прощу задавать их в комментариях. В следующий раз я расскажу об одном интересном эффекте для изображений в новом окне. Смотрится просто потрясающе. Не пропустите – подписывайтесь на RSS блога или по e-mail! P. S. Интересно и полезно почитать:
- Google Chrome – новый браузер (обзор, анализ, темы для браузера) Зачем нужны квадратные скобки кейвордам в Google Adwords? SEO для самых маленьких или как избавиться от докучающих новичковНастроить косспостинг на платфорсу блоггер (blogspot. com) Без особых программ и усилий