Изменить фон сообщения в блоге.

Всем доброго времени суток. Здравствуйте друзья, читатели и гости блога. Очень рада видеть у себя новых посетителей. Спасибо вам всем за то, что читаете мои шпаргалки. Хочу отметить, что очень многие только делают первые шаги в блогосфере. И в связи с этим вопросов по ведению и оформлению блога достаточно.


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

В редакторе сообщений Блоггер вверху справа есть 2 функции создать и HTML. Для того чтобы выделить отдельным фоном конкретное сообщение нужно перейти в режим  HTML. И там установить вот такой код.

<div style="background-color: #444; color: #fff; padding: 10px;">
здесь текст вашего сообщения.
</div>

background-color: #444-это цвет самого фона. Вы можете воспользоваться для подбора цвета этим генератором.  Просто поменяйте значение #444 на своё.
color: #fff - это цвет шрифта.

В строке, которую я выделила синим цветом, сам текст. Посмотрите на скриншоте, как это выглядит.

цвет фона сообщения

Принцип я думаю понятен. Весь текст мы расположили между тегами <div></div> и задали свои стили.

 Вот что  получается. Картинки вставляем обычным способом.

Красивым быть - не значит им родиться,
Ведь красоте мы можем научиться.
Когда красив душою Человек -
Какая внешность может с ней сравниться?


Подобным образом в качестве фона можно использовать любое изображение, картинку. Для этого берём следующий код.

<div style="background: url( Здесь адрес вашего изображения.); background-size: cover; color: #000; padding: 10px;">Здесь текст сообщения
</div>

Результат .

Сорванный цветок должен быть подарен, начатое стихотворение - дописано, а любимая женщина - счастлива, иначе и не стоило браться за то, что тебе не по силам.


Обратите внимание на цвет шрифта - color: #fff; в первом варианте и color: #000; -во втором. Если ваш цвет фона будет светлым или тёмным, то, конечно же, эти значения нужно поменять. В качестве фона можно сделать и видео. Но об этом поговорим позже.

И чтобы не писать отдельный пост, посмотрите как сделать фон для картинки.



Вот такой код вставляем при написании сообщения в режиме HTML

<style>#izo {
 height: 25em;
 line-height: 25em;
 text-align: center;
 background:pink ;
}
#izo img {
 vertical-align: middle;
}
</style>

<div id="izo"><img src=" Адрес вашего изображения"></div>

Картинка будет лучше смотреться на фоне, если у неё убрать рамку. Как это сделать в Блоггере читайте этот пост. При написании сообщения фон виден не будет. Результат отобразится после публикации.

Вот и всё. Вопросы задавайте в комментариях. Ещё раз спасибо за внимание. Удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


15 комментариев:

  1. Анонимный4/25/2015

    Пробовала воспользоваться первым примером, только ничего не вышло. Что я не так сделала . Поставила цвет DCB003.

    ОтветитьУдалить
    Ответы
    1. Возможно вы не поставили значок # перед DCB003. или удалили другие значения. Тут всё важно-чёрточки, двоеточия и пр.

      Удалить
  2. Доброго времени суток Вика! Большое тебе спасибо за все твои шпаргалочки, за знания с которыми ты делишься!

    ОтветитьУдалить
    Ответы
    1. Валентина, привет. Спасибо на добром слове. Заглядывай.

      Удалить
  3. Вика, примите от меня медальку: http://rukodelkiotmari.blogspot.ru/2015/04/blog-post_27.html#more

    ОтветитьУдалить
  4. Виктория, здравствуйте. Спасибо большое за шпаргалки. Опробовала фон на странице сообщения. Получились оба варианта. http://00149.blogspot.ru/2016/01/blog-post_28.html

    ОтветитьУдалить
    Ответы
    1. Любовь, приятно слышать и рада за Вас.

      Удалить
  5. Виктория! Здравствуйте! Сегодня я вставила фон для своей страницы в сообщении на Волшебном фонарике. ЗДОРОВО! Теперь буду иногда его использовать. СПАСИБО за шпаргалки. Я использовала ваш генератор цвета, который тоже поставила себе на блог. Очень удобно. Он всегда под рукой. На этом же блоге я создала страницы. Посмотрите мою страницу "Я-Блогер". Вы ведь не против, что я рекламирую ВАШ БЛОГ? У меня часто коллеги спрашивают, как я это или то поставила на блог и я отсылаю их к вашим шпаргалкам.

    ОтветитьУдалить
    Ответы
    1. Ирина, спасибо большое вам за отзыв. Я периодически заглядываю к Вам и на фонарик и на Ваську. По мере возможности. У Вас всё получится. а нет так разберёмся. Спасибо за ссылку намой блог. Очень приятно.

      Удалить
  6. Виктория! Спасибо за комментарий! Я написала Вам ответ в своих комментариях на Волшебном Фонарике. Это мне неудобно, вы так много для меня сделали. Дай Бог Вам здоровья и личного счастья!

    ОтветитьУдалить
  7. Я начинающий.Как сделать цвет фона сообщения прозрачным и полупрозрачным?

    ОтветитьУдалить
    Ответы
    1. Привет, Владимир. Все мы когда - то начинали. Способов много. Для сообщения одним из самых простых, можно так
      <div class="bg">
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
      Вставляем в режиме HTML в редакторе сообщения. opacity: .4;- меняйте на своё усмотрение. url картинки тоже.

      Удалить
  8. С кодом промахнулась немного. Напишите мне на почту через форму связи выше. Отправлю код. Писать отдельный пост пока нет возможности.

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск