Как оформить заголовок виджета фоновым цветом

---

Красивое оформление заголовка виджета фоном и в рамку

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

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

Тут уже зависит от фантазии вебмастера, и то, что Ваш заголовок будет оформлен в индивидуальном стиле и не похож на заголовки в других блогах-это факт. 

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

Идем в шаблон. Не забываем делать резервную копию шаблона. Нажимаем-изменить шаблон. Находим рядом с самой первой стрелкой строку <b:skin>...</b:skin>, нажимаем на стрелку, прокручиваем медленно вниз и выше строки ]]></b:skin> вставляем CSS.

.sidebar .widget h2 {

background: #3d162e;

height:25px;

width: 225px;

border-radius: 15px;

border:1px dashed #ffffff;

margin-left: 0px;

padding-top:7px;

font-size: 12px;

text-align: center;

}

Выделенное лиловым-фон заголовка; синим-высота и ширина; коричневым-радиус закругления углов; голубым-размер, форма и цвет границы рамки; фиолетовым-положение текста; желтым-выравнивание текста по центру.

Если Вы хотите оформить только фон заголовка, то удалите форму, размеры рамки и радиус закругления углов. Так же можно удалить и выравнивание текста по центру:

 .sidebar .widget h2 {

background: #3d162e;

height:25px;

width: 225px;

margin-left: 0px;

padding-top:7px;

font-size: 12px;

}

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

.sidebar .widget h2 {

background: #f9e8ff;

border:2px ridge #f9e8ff;

border-radius:10px;

font-size: 12px;

text-align: center;

}

Как видите, здесь нет настроек ширины и высоты. Устанавливается автоматически на двух панелях. Не очень мне конечно нравится, можно посмотреть в этом блоге, но может в Ваших шаблонах будет по другому. Пробуйте настроить с размерами высоты и ширины, если будет как у меня, придется удалить. 

Не смотря на вставку CSS, Вы так же сможете настраивать в дизайне цвет шрифта, жирность, наклон.

А заголовки настраивайте на свое усмотрение. Так же можете комбинировать границы и формы рамки, можно оформить фоном или только в рамку. Тут уже все зависит от фантазии каждого.

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

Похожие темы: Как выделить виджеты блога разделителем; Как оформить виджеты разным фоновым цветом;Как изменить фон боковых панелей блога Blogspot; Красивое оформление основного фона и всех страниц блога; Изображения для заголовков виджета;