Оформление изображений в блоге с использованием CSS стилей

---

Как красиво оформить изображения на страницах блога

Здравствуйте посетители и читатели моего блога. Сегодня мы с Вами будем заниматься оформлением изображений на страницах и боковых колонках блога. Это еще один способ оформления картинок. В моем посте оригинальное оформление изображений в блоге мы загружали картинку с диска, копировали адрес изображения и вставляли в код.


Этот вариант с использованием стилей CSS проще, Вы только один раз настроите оформление, правда все изображения будут одинаково оформлены. Но Вы можете при желании воспользоваться информацией в статье по ссылке выше, и при необходимости оформить какое то из изображений в другом стиле.

Тестируя разные шаблоны Простой и Корпорации, так же и не стандартные шаблоны заметила, что в некоторых вообще нет функции настройки оформления изображений. Сейчас рассмотрим вариант оформления, где в шаблонах присутствует такая функция.

В админке blogger нажимаем шаблон-делаем резервную копию. Далее нажимаем изменить шаблон и в самом начале ищем вот эту строку (выделено красным). Затем ищем строку .post-body img (выделено синим).

/* Posts
----------------------------------------------- */

ЗДЕСЬ БУДЕТ ЕЩЕ КОД

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);

ДОБАВИТЬ

background:#ff9900;
     border:2px dotted #f00;
     border-radius:14px;
     padding: 7px;
}

Мы добавили цвет фона (лиловым); размер, форму и цвет окантовки рамки (зеленым); радиус закругления углов (голубым); набивка фона (оранжевым). Кстати, если не захотите оформлять свои картинки, то можно добавить border-radius:14px; и закруглить углы всех изображений автоматически. Смотрим пример

Как я уже написала выше, все изображения блога будут оформлены одним стилем. Поэтому Вам надо хорошо подумать и настроить оптимальные цвета для всех изображений.

Теперь тем, кто не найдет в своих шаблонах настройку изображений. Выполняем те же действия. Далее в шаблоне ищем строку <b:skin>...</b:skin> рядом с самой первой стрелкой, нажимаем на стрелку, прокручиваем вниз и выше строки ]]></b:skin> вставляем стиль CSS ниже

.post-body img

background:#ff9900;

     border:2px dotted #f00;

     border-radius:14px;

     padding: 7px;

}

Можно оформить картинки в боковой колонке

Этот стиль для всех изображений в боковой панели

.sidebar img {

background:#3d162e;

     border:2px dotted #fff;

     border-radius:14px;

     padding: 7px;

}

Этот стиль для одной картинки 

#HTML9 img {

background:#3d162e;

     border:2px dotted #fff;

     border-radius:14px;

     padding: 7px;

}

HTML9-ID гаджета. Как быстро узнать ID гаджета, читайте в моем посте как изменить фон боковых панелей блога Blogspot; Посмотрите пример оформления в демо блоге: на странице и в боковой панели отдельный гаджет Пример слайд-шоу.
У меня все на сегодня, будут вопросы задавайте. Делитесь с друзьями и знакомыми в социальных сетях. Всего доброго, До свидания.

Почитайте:  Простой способ закруглить углы изображений; Как сделать изображение ссылкой; Как узнать URL адрес ссылки на картинку;