Как сделать фон в блоггере
Добавил пользователь Владимир З. Обновлено: 04.10.2024
У владельцев блогов на платформе blogger очень часто возникает потребность заменить фон у шаблона,либо на другой цвет либо вовсе на иное изобоажение.Но как правило никто не знает как это сделать. Что для этого необходимо,чтобы фон шаблона изменился?
А много не нужно.Длстаточно лишь изменить в шаблоне blogger небольшой кусочек HTML.
Теперь рассмотрим по подробнее этот момент.
Первый и самый простой способ изменить фон в шаблоне Blogger подходит для случая когда вы используете какой-либо из шаблонов по умолчанию.
Для смены фона вам нужно будет нажать: Дизайн - Дизайнер шаблонов и вы попадете в Дизайнер шаблонов Blogger,где и сможите изменить фон на цвет или изображение.
Но данный вариант не совсем подойдет если вы используете шаблон Blogger загруженный и разработанный специалезированным дизайнерским сайтом.
В этом случае,перейдем к изменению фона на блоге blogspot путем изменения HTML
Для этого ,нажимаем следующие ссылки
а) Дизайн > Изменить HTML >
б)Вы можите на всякий случай сделать резернфное копирование,дабы не потерялись ваши настройки.
в) Затем ищем в HTML коде body
После данной строчки нам нужно будет добавить background - image : url(адрес на ваше изображение );
Странно, но изначально Blogger настроен так, что при загрузке изображения, создает вокруг него довольно широкую рамку. Причем, изменить параметры рамки встроенными инструментами, сервис не позволяет. Некоторые блогеры советуют добавить свой стиль CSS для отдельных изображений. Это можно сделать на вкладке "шаблон", кнопка "Изменить HTML". Я же не вижу необходимости оставлять вообще рамки, поэтому просто убрал ее в существующем стиле.
Допускаю, что в разных шаблонах может быть разный код, ответственный за редактирование рамки и фона загруженного изображения, поэтому буду сразу указывать название шаблона. Часть кода шаблона, содержащая ".post-body img," указывает на то, что именно здесь задаётся CSS-стиль рамки и фона изображения. Такой код можно найти с помощью панели управления Blogger, на вкладке "шаблон", кнопка "Изменить HTML". В шаблоне "Водяной знак" (watermark), включая все его стили, код содержится в условном разделе /* Widgets*/.
Редактирование рамки изображения
Если фон картинки настраивается в один тон с внешним фоном, то визуально изменение размера рамки мы не увидим, поэтому попробуйте сначала определиться именно с ней. Ширина рамки устанавливается строчками padding: 5px; и padding: 8px;. Установив значение 0px вместо 8px, рамка сведется к нулю. Эффект тени рамки изображения можно отредактировать в строке "box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);". Три параметра в пикселях отвечают за величину боковой, нижней тени и за её размытость. Rgba меняет цвет.
В шаблоне "Простой" ("Simple"), включая все его стили, код содержится в условном разделе /*Posts*/.
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
Для слияния фона изображения с общим фоном, закомментируйте строку
Привет, друзья. Хочу показать как очень просто изменить общий фон всего блога. Хотя сам фон можно легко настроить в разделе Тема . Там можно подобрать готовые фоны или залить свою картинку и сделать соответствующие настройки. Однако, решила вам предложить более лёгкий вариант, на мой взгляд. Здесь мы сами сможем регулировать размер фоновой картинки. Вернее её ширину.
Перейдём к делу. Изначально мой тестовый блог выглядел так. Я отметила пространство (или задний фон всего полотна), который задан был в настройках темы.
Сейчас мы его поменяем на такую картинку
Чтобы получилось примерно вот так
Здесь я хочу обратить ваше внимание. Ширина блога в моём случае 1200 px. Размеры фоновой картинки 1450 на 950 px. Картинка заполнила полностью всё пространство.
Если размеры фоновой картинки будут меньше размера всего полотна блога, то она не закроет всё пространство и будет выглядеть в виде бордюра. Посмотрите разницу
Оно, вроде как, тоже вполне приемлемо. Некоторые таким образом украшают сайты к праздникам. В любом случае рассмотрим оба варианта. При правильно подобранном или созданном в любом редакторе фоне и тот и другой вариант можно подогнать.
Особых навыков не нужно.
1. Подберите нужную картинку и скопируйте её адрес.
2.Копируйте приведённый ниже код и устанавливаете адрес своей картинки
3. Идём во вкладку Тема - Изменить HTML находим ]]> и устанавливаем над этой строкой готовый код.
Результат будет виден при просмотре темы. Если вы остались им довольны смело нажимайте сохранить и любуйтесь новым шаблоном.
Опять же повторюсь. На тот случай если картинка оказалась меньше размеров ширины блога или вообще спряталась с глаз долой, нужно в коде задать значение ширины. Добавим всего одну строчку и он выглядел так
Со значением background-size: 100%; можно поиграться, меняя его на меньшее, пока не добьётесь желаемого.
Такими простыми манипуляциями можно создавать разные фоны под разные праздники, времена года или ваше настроение.
Читайте также: