Новогодний внешний фон для блогов блоггер Оформление на CSS



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

В сайдбаре справа статья Украшения для блогов к Новому Году. Там в основном виджеты: гирлянды, елки, санты. А сегодня предлагаю изменить внешний фон, шапку и сайдбар блога новогодним фоновым изображением.

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

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

А теперь подробно, как реализовать эту красоту.

  • Наличие своей или находите в интернете новогоднюю картинку;
  • Правой кнопкой мыши "Сохранить картинку как.."   на компьютер;
  • В черновике блоггер по вкладке дизайн открываете дизайнер шаблонов;
  • Далее Фон;
  • Я не буду в этой статье повторяться. Как загрузить фон я уже писала, перейдите для просмотра;
  • Фон внешний, поэтому никакого дискомфорта для чтения информации в блоге не будет.
Без загрузки картинки в дизайнере шаблонов (кроме шаблона Венецианское окно).
В шаблоне Корпорация чудеса изменится внешний и основной фон, ссылка.

1. CSS для изменения фона

<style>
.content{
background: url(адрес новогодней картинки);
}
</style>
2. CSS для шапки

<style>
.Header{
background-image:url("адрес картинки");
  }
</style>

3. Стиль CSS для основного заголовка (названия блога)

<style>
.Header H1 {
background-image:url("адрес картинки");
  padding: 70px; 
  border-radius: 0px 16px 0px 80px;
  -webkit-border-radius: 0px 16px 0px 80px;
border-bottom: 5px groove #03b4cc;
padding-bottom: 5px;  
}
</style>

4. CSS для новогоднего фона боковых колонок

<style>
 .sidebar {
background-image:url("адрес картинки");
border:2px dotted #03b4cc;}
</style>

Если хорошо постараться и включить фантазию, то оформить можно:

И последнее, можно внешний фон связать с основным

<style>
.content-inner{
background: url(адрес картинки);
}
</style>

Или (шаблоны разные)

<style>
.content-outer{
background: url(адрес картинки);
}
</style>

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

В стилях три и четыре CSS добавила линию подчеркивания/скругления нижней границы основного заголовка и рамку для сайдбара. Если не понадобится, удалите. 

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

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

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 12/18/2016 Ярлыки ►


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

0 коммент. :

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


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

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

Имя

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

Сообщение *