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



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


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

Остался у нас заголовок виджета. В настройках дизайна 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; красивое оформление основного фона и всех страниц блогаизображения для заголовков виджета;




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


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

3 коммент. :

  1. Оля, привет! Лови подарок http://naputikuspehu.blogspot.com/2014/06/priyatnosti-prodolzhayutsya-Libster-Blog-Award.html
    Желаю удачи!

    ОтветитьУдалить
  2. Скажу честно. Вашим советам- цены нет! Спасибо вам!

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

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

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

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

Имя

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

Сообщение *