Как автоматически изменить размер всех изображений/картинок в Blogger

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

Размеры изображений в Blogger

Конечно, вы можете один за другим изменять размеры всех изображений вручную, но что вы будете делать, если на вашем сайте будет более тысяч картинок и изображений. Вы будете изменять их вручную? Даже если вы вручную решитесь сделать это,  у вас это займет несколько недель или даже несколько месяцев, а может и годы. Ну и соответственно, проще будет просто изменить их автоматический через прямой CSS код. Благодаря такому подходу, вы также сможете вернуть размеры изображений обратно в их первоначальные размеры.

Как изменить размер изображений в Blogger

Первое, что вам нужно сделать, это перейти в Blogger.com >> Выбрать нужный блог >> Шаблон >> Изменить HTML. Далее в HTML редакторе найдите тег ]]></b:skin> и только выше него вставьте следующий кусок CSS кода.

.post-body img {
width: 500px!important;
height: auto!important; }

Совет: Если вы не можете найти тег ]]></b:skin>, то сначала щелкните в любом месте HTML редактора и нажмите клавиши CTRL + F для работы со встроенным поиском, который подключен к HTML редактору.

Теперь измените значения ширины (оно отмечено голубым цветом) и высоты (оранжевым цветом), в соответствии с вашими потребностями. Вы даже можете добавить границу к изображениям, добавив скромную команду границы (border: 1px solid #d2d2d2) в CSS. После настройки, нажмите кнопку «Сохранить шаблон» и все.

Я надеюсь, что этот трюк поможет вам изменить размеры старых изображений/картинок на BlogSpot. Если я что-то упустил, или вы знаете гораздо более простой способ решения этой проблемы, то в разделе комментариев чуть ниже все ваше :).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>