Как вставить картинку в боковую панель на Blogger

Все мы не один раз сталкивались с тем, что необходимо вставить картинку в боковую панель своего блога. Конечно же, хочется, чтобы любимый блогодомик выглядел аккуратным, но не всегда это получается. Лично у меня последняя попытка вставки картинки в боковую панель выглядела вот так:

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

Для этого необходимо:



1. Зайти в Панель инструментов своего блога и выбрать вкладку Дизайн

2. В открывшемся окне жмем на Добавить гаджет

3. Из многочисленного списка выбираем HTML/JavaScript (не бойтесь такого страшного названия, на самом деле всё проще, чем кажется)

4. В появившемся окне заполняем Название (по желанию), а в поле Содержание копируем вот такой шаблон

<a href="Ссылка на страницу, которая должна открываться при нажатии на картинку"><img height="150" src="Ссылка на картинку" width="150"/></a>

5. Теперь заменяем слова, выделенные жирным шрифтом, на необходимые нам ссылки. Где их получить рассмотрим на рисунке.

Под цифрой 1 ссылка на страницу, которая должна открываться при нажатии на картинку.
Нажав на Копировать URL картинки (под цифрой 2) получим ссылку на саму картинку.

Внимание! "Копировать URL" картинки может звучать по-другому, например: "Копировать ссылку на изображение". Все зависит от того, какой программой пользоваться для входа в Интернет.

Вот что отобразилось у меня в поле Содержание после копирования ссылок

<a href="http://natashka-joy.blogspot.com/2011/07/blog-post_1122.html"><img height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnnuBIyzO6Xj-3pYg6azbMt28S6PVz4oRPbma11LabQlzXAHm7rQjggOJ0M0U8F-9et5KkRmtUdZuxYi6ycPeZ1GKroGqgMQw9EInGGrThcM0k-W6wDqJeo_LOsnJmRxwOOd181d8vLVB/s320/ovechka.jpg" width="150"/></a>

6. Половина дела сделана. Теперь позаботимся о размерах картинки. За них отвечают вот эти параметры

<a href="http://natashka-joy.blogspot.com/2011/07/blog-post_1122.html"><img height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnnuBIyzO6Xj-3pYg6azbMt28S6PVz4oRPbma11LabQlzXAHm7rQjggOJ0M0U8F-9et5KkRmtUdZuxYi6ycPeZ1GKroGqgMQw9EInGGrThcM0k-W6wDqJeo_LOsnJmRxwOOd181d8vLVB/s320/ovechka.jpg" width="150"/></a>

height – это высота картинки, width – ширина, цифры в кавычках – это их значение.
Так как шаблон, практически у каждого блога индивидуален, то подбирать их надо исходя из своей ширины колонки.
Например, у меня ширина левой колонки равна 210. При этом максимальная ширина картинки, которую я могу себе позволить – это 170 (вычислено опытным путём). Для данной картинки из примера я поставила значения height и width равными 150. Если бы картинка была прямоугольной, а не квадратной, пришлось бы немного заняться математикой.

Внимание!Нужно помнить, что изменять ширину и высоту картинки надо пропорционально, на одинаковое количество пикселей (именно в них измеряются высота и ширина картинки), иначе изображение на ней может некрасиво растянуться или сжаться.

Для того чтобы под картинкой отображалась дополнительная надпись, в конце кода необходимо добавить <p>"Надпись"</p>. Слова Надпись легко заменяются на любые другие:)

Вот собственно и всё! Пусть блогодомик всегда радует Вас своим видом:)

P.S. Для тех, кто не любит или не хочет возиться с HTML кодом обещаю подготовить статью на эту же тему, но без "ужасных закорючек".
P.S.S.Особая благодарность за помощь в написании статьи Natashka