Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
воскресенье, 15 апреля 2018 г.

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

 ИСТОЧНИК: http://www.bdblogov.ru/2014/07/How-change-external-background-blog-Blogspot-your-image.html
Так как шаблоны у нас у всех разные,  пример настройки внешнего фона, применив шаблон Простой и Корпорация "Чудеса". Но даже в этих шаблонах могут быть различия в коде, так как Google предлагает нам их несколько.
В дизайнере шаблонов мы можем настроить фон из предлагаемых фоновых изображений.
Как в дизайнере шаблонов настроить внешний фон блога
В черновике 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);  
Делаем те же шаги: в том же разделе ищем строку, выделено 
красным.content-outer {
background-image: url([url]http://s43.radikal.ru/i101/1407/47/173fc3f62e81.png[/url]);
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 адрес своего изображения, при необходимости настройте границы рамки. В шаблоне Простой придется использовать настройки такого стиля, так как уверена, что Вы захотите изменить и основной фон блога.
Маленький совет: оформите настройки основного фона под изображение в дизайнере шаблонов, а уже после настроек вставляйте адрес картинки внешнего фона.



0 коммент.:

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