13.09.2014

РАБОТА С ИЗОБРАЖЕНИЯМИ В ПОСТЕ BLOGGER

Люди любят смотреть картинки, и поэтому, я думаю, в ваших блогах много иллюстраций к постам. Именно поэтому стоит уделить им отдельное внимание и посвятить этот небольшой урок. В этом посте вы узнаете, почему Blogger меняет цвет картинки при загрузке, как убрать рамку вокруг фото в посте и как закруглить края фотографии в каждом посте не используя Photoshop.

1
Очень часто меня спрашивают, по какой причине картинки, после загрузки их у в корень блога, меняют свой цвет, серееют.
Я  не знаю по какой причине это происходит, но это происходит только с фото/картинками в формате JPEG. Выхода из этой ситуации два: первый - использовать формат PNG, второй, использовать сторонние фотохостинги. Например  photobucket.com    radikal.ru .


2

Убрать рамку вокруг картинки в блоггер очень просто. Рано или поздно стандартная рамка начинает раздражать глаз, и чтобы избавиться от этой проблемы следует произвисти немного манипуляций.
Перейдите в  панель управления  вашим блогом, выберите пункт  шаблон , затем  настроить . Далее выберите пункт  дополнительно  и в самом низу нажмите   добавить CSS .
Скопируйте кот представленный ниже, вставьте его в открывшееся окно и нажмите сохранить.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

 3
Закруглить края на всех картинках в посте так же просто, как и удалить рамку вокруг нее. 
Перейдите в  панель управления  вашим блогом, выберите пункт  шаблон , затем  настроить . Далее выберите пункт  дополнительно  и в самом низу нажмите   добавить CSS .
Вставьте в окно код, и нажмите сохранить.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {  padding: none !important;  border-radius: 30px ;  background: none !important;  -moz-box-shadow: 0px 0px 0px transparent !important;  -webkit-box-shadow: 0px 0px 0px transparent !important;  box-shadow: 0px 0px 0px transparent !important;}
Меняя значение 30px вы меняете радиус углов.

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

Комментариев нет:

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