Как изменить внешний фон блога Blogspot своим изображением



Настройка  внешнего фона блога цветовым фоном или фоном изображения 

Обновлено: 06.05.2020 г.
Добрый день гости и читатели моего блога. В этом уроке будем учиться настраивать внешний фон блогов. В одном из своих постов я писала, как изменить основной фон блога (ссылка внизу поста), почитайте.

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

Но даже в этих шаблонах могут быть различия в коде, так как Google предлагает нам их несколько. По моему там штук 7 шаблонов Простой и 6 Корпорации.

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

Как в дизайнере шаблонов настроить внешний фон блога

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

Для оформления внешнего фона блога своим индивидуальным стилем изображения, идем тема (делаем резервную копию шаблона)-изменить HTML

Раскрываем слева самую первую стрелку, и в самом начале раздела стилей CSS находим такой код

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);   УДАЛИТЬ
background-image: url(url адрес изображения);  ВСТАВИТЬ

В этом стиле выделенное синим-удаляем, лиловым-вставляем URL адрес своего изображения (выделено красным). Нажимаем просмотр, затем сохраняем.

Посмотрите скриншот, как вставить адрес изображения

Как вставить код CSS для изменения внешнего фона в индивидуальном стиле

Если Вам будет трудно изменить стиль в теле шаблона, а вставить свою картинку очень хочется, прокрутите чуть вниз и выше строки ]]></b:skin> вставьте стиль CSS ниже

body {
background-image: url(url адрес изображения);  
}  

Кто не знает, где искать строку <b:skin></b:skin> в шаблоне, почитайте пост как быстро и красиво оформить текст блога.  При тестировании в шаблоне Корпорация "Чудеса" у меня изменился не только внешний фон, но и основной фон блога, стали одинаковы. Посмотрите в демо блоге.

Меня такой вариант устроил, тем более, что это тестовый блог. Но я не думаю, что это произойдет во всех шаблонах корпорации. У кого поменяются оба фона, надо основной настроить отдельно (в дизайнере шаблонов вы уже не сможете изменить ни внешний, ни основной фон).

Делаем те же шаги: в том же разделе ищем строку, выделено красным

.content-outer {
background-image: url(url адрес изображения);
border:groove 7px #00cdcd;
}

Добавляем свое изображение, или цветовой фон #ffffff, у меня еще в стиль добавлены границы рамки: форма, размер толщины и цвет (выделено лиловым).

Опять же, у кого не получится изменить основной фон таким способом, прокручиваем вниз и выше строки ]]></b:skin> вставляем стиль CSS ниже

.content-outer {
min-height: 0;
margin: 0 auto;
background-image: url(url адрес изображения);
border:groove 7px #00cdcd;
}

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

Маленький совет: оформите настройки основного фона под изображение в дизайнере шаблонов, а уже после настроек вставляйте адрес картинки внешнего фона.

У меня на сегодня вся информация. Задавайте вопросы, если будут трудности в оформлении внешнего фона Вашего блога. Поделитесь со своими друзьями и знакомыми в социальных сетях. А я говорю Вам всем До свидания и до новых встреч.

Почитайте:  Красивое оформление основного фона и всех страниц блога; Бесшовные фоны для рамок, цитат и внешнего фона блога/сайта;

Рекомендуемый контент:




Автор статьи ✎ Olga Protasova Выпуск ✹ 5/06/2020 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *