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



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



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

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

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

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

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

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

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);   УДАЛИТЬ
background-image: url(http://s43.radikal.ru/i101/1407/47/173fc3f62e81.png);  ВСТАВИТЬ

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

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

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

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

body {
background-image: url(http://s43.radikal.ru/i101/1407/47/173fc3f62e81.png);  
}  

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


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

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

.content-outer {
background-image: url(http://s43.radikal.ru/i101/1407/47/173fc3f62e81.png);
border:groove 7px #00cdcd;
}

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

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

.content-outer {
min-height: 0;
margin: 0 auto;
background-image: url(http://s43.radikal.ru/i101/1407/47/173fc3f62e81.png);
border:groove 7px #00cdcd;
}

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

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

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

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


Автор статьи ✎ Olga Protasova Выпуск ✹ 7/22/2014 Ярлыки ►


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

0 коммент. :

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


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

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

Имя

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

Сообщение *