Как изменить рамку для фотографии в Блоггере

В некоторых шаблонах Блоггера есть встроенная рамка для фотографий, которая устанавливается в каждой статье автоматически. Рамка обычная, неприметная - тень и окаёмка вокруг. Многие её удаляют или отключают в настройках.

Если вам импонирует рамка для ваших картинок в статье, но хотелось бы её изменить на более красивую, в шаблоне нужно будет сделать небольшие изменения. Рамки можно будет менять хоть каждый день.

Обязательно перед каждым изменением в шаблоне сохраняйте его.

Меняем рамку для изображений

Заходим в Шаблон - Изменить HTML. Нужная строка может выглядеть по-разному:

.post img{

____код____

}

.post img

{____код____

}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

____код____

}

img {

____код____

}

.post-body img {

____код____

}

Находим нужный код с помощью ctrl+f .

Находится он в отделе

/* Posts

----------------------------------------------- */

У меня в шаблоне Корпорация чудес оказался последний вариант.

Этот код нужно удалить и вставить либо предложенные ниже, либо свой, но сделанный на основе предложенных.

Код, который будете заменять в шаблоне, сохраните на компьютере. Если вдруг понадобится вернуться к исходному коду, вы легко установите его обратно.

Вариант 1 - рамка в виде марки:

.post img {
padding: 8px;
background: #ffffff;
border: 3px dotted #E2E2E2;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Вариант 2 - ещё одна рамка в виде марки

.post img {
padding: 8px;
background: #ffffff;
border: 3px dashed #E2E2E2;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Вариант 3 - рамка зелёная, без тени.

.post img {
padding: 8px;
background: #FFFFFF;
border-top:10px ridge #2ecca4;
border-right:10px double #2ecca4;
border-bottom:10px ridge #2ecca4;
border-left:10px double #2ecca4;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Вариант 4 - градиентная рамка и тень.

.post img {

-moz-box-shadow: 0 0 20px rgba(114, 10, 242, 1);

-webkit-box-shadow: 0 0 20px rgba(114, 10, 242, 1);

box-shadow: 0 0 20px rgba(114, 10, 242, 1);

border: 4px solid transparent;

border-image-source:linear-gradient(to bottom right, #760a85 0%, #ff00d4 100%);

border-image-slice: 1;

}

Вариант 5 - двойная рамка с тенью.

.post img {
padding: 8px;
background: #FFFFFF;
border: 5px double #495518;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Вариант 6 - рамка круглая.

.post img {
border-radius: 50%/50%;
box-shadow: 0 0 0 3px #495518,
0 0 0 7px #6c7a28,
0 0 0 10px #879539;
padding: 40px;
margin: 20px auto;
}

Если фото прямоугольное, то рамка будет овальной, если фото квадратное, то рамка будет круглая.

Вариант 7 - изменить форму фото.

.post img {

border-top-left-radius: 20px;

border-top-right-radius: 0;

border-bottom-right-radius: 30px;

border-bottom-left-radius: 0;}

Добавлять можно тени, различные рамки, в том числе градиентные, менять их цвет, ширину, скруглять и многое другое. Одним словом, от .post img { и до } можно создавать разное оформление.