Как красиво оформить изображения на страницах блога
Здравствуйте посетители и читатели моего блога. Сегодня мы с Вами будем заниматься оформлением изображений на страницах и боковых колонках блога. Это еще один способ оформления картинок. В моем посте оригинальное оформление изображений в блоге мы загружали картинку с диска, копировали адрес изображения и вставляли в код.
Этот вариант с использованием стилей CSS проще, Вы только один раз настроите оформление, правда все изображения будут одинаково оформлены. Но Вы можете при желании воспользоваться информацией в статье по ссылке выше, и при необходимости оформить какое то из изображений в другом стиле.
Тестируя разные шаблоны Простой и Корпорации, так же и не стандартные шаблоны заметила, что в некоторых вообще нет функции настройки оформления изображений. Сейчас рассмотрим вариант оформления, где в шаблонах присутствует такая функция.
В админке blogger нажимаем шаблон-делаем резервную копию. Далее нажимаем изменить шаблон и в самом начале ищем вот эту строку (выделено красным). Затем ищем строку .post-body img (выделено синим).
Этот вариант с использованием стилей 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;
}
----------------------------------------------- */
ЗДЕСЬ БУДЕТ ЕЩЕ КОД
.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; и закруглить углы всех изображений автоматически. Смотрим пример
HTML9-ID гаджета. Как быстро узнать ID гаджета, читайте в моем посте как изменить фон боковых панелей блога Blogspot; Посмотрите пример оформления в демо блоге: на странице и в боковой панели отдельный гаджет Пример слайд-шоу.
У меня все на сегодня, будут вопросы задавайте. Делитесь с друзьями и знакомыми в социальных сетях. Всего доброго, До свидания.
Как я уже написала выше, все изображения блога будут оформлены одним стилем. Поэтому Вам надо хорошо подумать и настроить оптимальные цвета для всех изображений.
Теперь тем, кто не найдет в своих шаблонах настройку изображений. Выполняем те же действия. Далее в шаблоне ищем строку <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 адрес ссылки на картинку;
Рекомендуемый контент:
