Как изменить фон отдельной страницы блога



Оформление страниц блога разным фоновым цветом



Здравствуйте дорогие гости и читатели. Сегодня мы с Вами будем оформлять страницы нашего блога разным цветовым фоном. Нужно же как то выделить свой блог, чтобы запомнился посетителям и они почаще заглядывали к нам в гости. Трудностей никаких нет, нужно просто заключить код HTML страницы в следующий код:


Код № 1
<div style="background-color:#ccc; border: 1px dotted #cccccc;">
Здесь HTML код Вашей страницы или кода, или цитаты
</div>



То есть таким способом можно изменить цвет фона страницы, заключить код или текст любым фоном.


-Милый, у тебя в ванной висят два полотенца с пометкой "М" и "Ж"...
Я вытерлась с пометкой "Ж", ведь "М"-это для мужчин?
-Нет, "М"-это для морды!...



Фразы, вызывающие панику: 1) Неверный логин или пароль. 2) Я хочу с тобой серьезно поговорить!. 3) К Доске пойдет...4) Это будет не больно...


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


Но и это еще не все. Ниже код, с помощью которого Вы сможете оформить страницу фоном картинки, фото или изображения

Код № 2
<div style="background-image: url(адрес картинки); background-repeat: height: 1000px; border: 1px dotted #cccccc; width: auto;">
Здесь HTML код страницы
</div>


Получится как-то так...













Иногда наступают периоды, 
когда у человека не может быть лучшего друга, 
чем одиночество, 
и лучшей подруги, чем тишина
















Или так















Чтобы сохранить друзей, надо уметь прощать...















То есть Вы можете применить фон изображения на всю страницу. URL адрес изображения узнаёте на сайте Radikal, Загружаете изображение с компьютера или интернета, копируете самую первую ссылку. На сегодня все. Оставляйте Ваши отзывы, комментируйте, делитесь с друзьями в социальных сетях. Всего доброго.



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


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

11 коммент. :

  1. Доброго времени суток Ольга, спасибо большое получилось перенести домен на блоггер. Скажите не могу найти "HTML код страницы", для того чтобы изменить фон. Где он берется? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, в редакторе сообщений blogger, где Вы пишите посты, слева вверху нажмите HTML.

      Удалить
  2. Ольга, будьте добры, а где оно должно появиться, вот создала новую страницу, перешла в редакторе в режим HTML, а там пусто! вот скрин goo.gl/V2oEK8. Или я делаю что-то не так? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, напишите текст или вставьте картинки, фото, видео, перейдите по вкладке и увидите HTML код страницы.

      Удалить
  3. Ольга, поняла, что это такое. Подскажите вот у меня результат goo.gl/tLCoFS получился такой "заплата на заплате" У вас на примере одна картинка и текст, я вставила правда еще фото (1 ступень) на изображение иначе он у меня тонкой полоской был(имею ввиду вставленное основное изображение). Как убрать фон страницы или фон блока. Или можно поменять основной фон сайта? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, изменить можно все. Ссылка как изменить основной фон блога
      http://www.bdblogov.ru/2014/05/beautiful-design-base-background-allpagesandblog.html

      Внешний фон блога:
      http://www.bdblogov.ru/2014/07/How-change-external-background-blog-Blogspot-your-image.html

      Если Вы хотите красиво оформить страницу, советую скрыть сайдбар, заголовок, футер, информация здесь:
      http://www.bdblogov.ru/2015/09/registration-page-no-header-sidebars-and-header-in-blogger.html

      Пример: https://orabotevseti.blogspot.com/2014/12/As-create-wallet-Bitcoin.html

      Картинку нужно подбирать по размерам.
      А гаджеты под сообщением на странице скройте:

      http://www.bdblogov.ru/2015/12/hide-widgets-on-static-and-pages-posts-with-using-CSS.html

      И пожалуйста работайте с демо блогом, или делайте резервную копию.

      Удалить
  4. Доброй ночи Ольга! Спасибо за ссылки и за советы, и вот мой результат goo.gl/U92dQm, далек от идеала. 1.Не смогла убрать основной фон блога; 2.Изображение вставленное не заполняет всю страницу (каких размеров она должна быть?) или необходимо какие-то параметры дополнительные указать? 3.Убрала все виджеты, внесла код в шаблон выше тега head, но появилась белая пунктирная полоса, я ее указала на скрине, как ее убрать? 4. На верху страницы сообщения какие-то красные уголочки, не могу понять откуда они появились? Я еще сделала один скрин goo.gl/v1VXli, это тот код который внесла в редактор сообщения. В тестовом блоге он у меня отличается немного. Помогите пожалуйста разобраться в этом! С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, зачем для изменения фона на странице вставили два кода в одном тэге style плюс два кода HTML и CSS изменить фон страницы. Вы же сверху вставили HTML код с картинкой, выбирайте что-то одно. Посмотрите у меня на скриншоте:
      goo.gl/iEmmuv

      1. Удалить сайдбар, заголовок, футер..У Вас кстати этот код не закрыт style.
      2. Картинку я загружала в редакторе, текста нет. Настроила только размеры. Посмотрите в статье код 2, добавила высоту и ширину. Если Вы будете писать текст на изображении, по высоте увеличиться.
      2. Код CSS на скриншоте (последний), подбор цвета под основной фон. Может Вам пригодиться. И убрала заголовок.

      Каждый код должен быть отдельно заключен в style, и в шаблоне, и по вкладке HTML для страниц.

      Не могу понять, что хотите с фоном сделать, изменить? Попробуйте в дизайнере шаблона: загрузите и замостите. Вот статья:
      http://www.bdblogov.ru/2014/10/How-download-personal-background-in-designer-templates-blogger.html

      Это для внешнего фона, но в некоторых шаблонах меняется и основной.

      Идем дальше. Выше head в шаблоне что вставляли? Сколько в блоге боковых панелей? У меня есть статья, но там инфа для нестандартных шаблонов. У Вас же родной шаблон. Если оформляете одну страницу, работайте по вкладке HTML, убирайте гаджеты со страницы.

      В родных шаблонах скрываете гаджеты на страницах (HTML), с главной применим другой код, скрываете в шаблоне по ID виджета. В этой статье код

      http://www.bdblogov.ru/2014/08/How-hide-widget-Linkwithin-with-home-page-blog.html

      Что касается уголков, нужно подбирать цвет под фон: #ed0c0c; fff;

      Работайте пока, внесите исправления, дальше будем смотреть, что за линии белые появились.

      Удалить
  5. Доброго времени суток Ольга! Два дня мучений и вот результат probtestez.blogspot.ru/p/blog-page.html. 1.Внизу полоса пунктирная все равно осталась, не знаю как ее убрать, она у меня во всех страницах появляется. Посмотрите пожалуйста, как можно ее убрать? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Тата. Хорошо поработали, мне понравилось. По линии: Вы комментарии изменили, я вижу вставлен стиль CSS.

      На странице комменты скрыты, а линию смотрите на скриншоте

      goo.gl/8ALa4X

      Обнулите border:2px dotted #fff; на border:0, и напишите мне результат.

      Удалить
  6. Tata, я Ваш комментарий удалила. По ссылке в комменте перебрасывает на мой блог, страница 404, не найдено.

    Мне надо видеть HTML код символа, нужно писать код внимательно, в конце обязательно точка с запятой.

    Если здесь не получится опубликовать код, пишите через форму для связи, меню-контакты.

    ОтветитьУдалить


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

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

Имя

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

Сообщение *