Оформление изображений в блоге с использованием 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; и закруглить углы всех изображений автоматически. Смотрим пример

Стиль CSS, куда вставить в шаблон блога и настройка оформления

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

Теперь тем, кто не найдет в своих шаблонах настройку изображений. Выполняем те же действия. Далее в шаблоне ищем строку <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; Посмотрите пример оформления в демо блоге: на странице и в боковой панели отдельный гаджет Пример слайд-шоу.
У меня все на сегодня, будут вопросы задавайте. Делитесь с друзьями и знакомыми в социальных сетях. Всего доброго, До свидания.





Автор статьи ✎ Olga Protasova Выпуск ✹ 8/03/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *