Как автоматически закруглить углы всех изображений в блоге Blogspot
Здравствуйте дорогие гости и читатели. Сегодня в своем небольшом сообщении я хочу рассказать Вам, как вставив код в виде гаджета, мы сможем закруглить все изображения на страницах блога.
Код этот был сохранен у меня на компьютере, и я, честно сказать и забыла о нем. Вчера решила почистить папку, удалить лишнее и нашла код, поэтому источник происхождения затрудняюсь сказать, пусть простит меня автор.
Хочу обратить внимание, что вставив этот код, изображения на страницах Вашего блога могут отображаться с закругленными углами, даже кто пользуется перелинковкой страниц определенных программ (nRelate.com), миниатюры так же будут с закругленными углами.
Единственное, что не изменится, так это картинки в сайдбарах. Что радует, подходит для любого фона дизайна сайта, всех цветов, но за работу скрипта поручится могу только на блогах Blogspot.
Код этот был сохранен у меня на компьютере, и я, честно сказать и забыла о нем. Вчера решила почистить папку, удалить лишнее и нашла код, поэтому источник происхождения затрудняюсь сказать, пусть простит меня автор.
Хочу обратить внимание, что вставив этот код, изображения на страницах Вашего блога могут отображаться с закругленными углами, даже кто пользуется перелинковкой страниц определенных программ (nRelate.com), миниатюры так же будут с закругленными углами.
Единственное, что не изменится, так это картинки в сайдбарах. Что радует, подходит для любого фона дизайна сайта, всех цветов, но за работу скрипта поручится могу только на блогах Blogspot.
Предлагаемый скрипт генерирует код border-radius и осуществляет закругление краев изображений, достаточно лишь указать требуемое число округления в пикселях.
Слева предлагаю посмотреть на картинки: на первом рисунке края закруглены радиусом 12 рх; на втором 30 рх.
Радиус закругления задала больше, разницу в округлении углов Вы видите.
Слева предлагаю посмотреть на картинки: на первом рисунке края закруглены радиусом 12 рх; на втором 30 рх.
Радиус закругления задала больше, разницу в округлении углов Вы видите.
А вот и сам небольшой код
<style>
.post-body img
{
-webkit-border-radius:12px!important;
-moz-border-radius:12px!important;
border-radius:12px!important;
}
</style>
Сюда я добавила оформление фона и рамки вокруг картинки
<style>
.post-body img
{
padding: 8px;
background: #0a9e08;
border: 1px solid #0a9e08;
-webkit-border-radius:12px!important;
-moz-border-radius:12px!important;
border-radius:12px!important;
}
</style>
Заменив 12 рх на требуемое значение, можно задать закругление изображений больше или меньше; выделенное оранжевым меняйте на свои значения. Код вставляете обычным гаджетом: черновик blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить. В поле название ничего не пишите, расположите гаджет в нижней части макета блога.
На этом у меня сегодня все, надеюсь информация будет для Вас полезной. Всего доброго.
На этом у меня сегодня все, надеюсь информация будет для Вас полезной. Всего доброго.
Рекомендуемый контент:
Спасибо, Ольга. Будет время обязательно примерю на свой блог.
ОтветитьУдалитьПожалуйста Сергей, пробуйте. Изображения с загругленными углами смотрятся намного оригинальнее..
Удалить