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

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

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

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

Заходим в Шаблон - Изменить HTML. Нужная строка может выглядеть по-разному:
1)
.post img{
____код____
}
2)
.post img
{____код____
}
3)
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
____код____
}
4)
img {
____код____
}
5)
.post-body img {
 ____код____
}
Находим нужный код с помощью ctrl+f . 
Находится он в отделе 
 /* Posts
----------------------------------------------- */
У меня в шаблоне Корпорация чудес оказался последний вариант.
шаблон
Этот код нужно удалить и вставить либо предложенные ниже, либо свой, но сделанный на основе предложенных.
Код, который будете заменять в шаблоне, сохраните на компьютере. Если вдруг понадобится вернуться к исходному коду, вы легко установите его обратно. 
Вариант 1 - рамка в виде марки:
Вариант 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 - ещё одна рамка в виде марки
Вариант 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 - рамка зелёная, без тени.
Вариант 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 - градиентная рамка и тень. 
Вариант 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 - двойная рамка с тенью.
Вариант 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 - рамка круглая.
Вариант 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 - изменить форму фото.
Вариант 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 { и до } можно создавать разное оформление.

Комментарии со спамом удаляются.