Красивое оформление заголовка виджета фоном и в рамку
Здравствуйте дорогие гости и читатели. Этой информацией мы закончим оформление виджетов в блогах блогспот. Мы научились выделять виджеты разделителем, настраивать фон всей боковой панели и отдельного виджета, а так же оформлять в красивые рамочки.
Остался у нас заголовок виджета. В настройках дизайна 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; Красивое оформление основного фона и всех страниц блога; Изображения для заголовков виджета;
На сегодня у меня все, творческих Вам успехов. Комментируйте, делитесь с друзьями и знакомыми в социальных сетях. Всего Доброго.
Похожие темы: Как выделить виджеты блога разделителем; Как оформить виджеты разным фоновым цветом;Как изменить фон боковых панелей блога Blogspot; Красивое оформление основного фона и всех страниц блога; Изображения для заголовков виджета;
Рекомендуемый контент:
Оля, привет! Лови подарок http://naputikuspehu.blogspot.com/2014/06/priyatnosti-prodolzhayutsya-Libster-Blog-Award.html
ОтветитьУдалитьЖелаю удачи!
Скажу честно. Вашим советам- цены нет! Спасибо вам!
ОтветитьУдалитьСпасибо Виталий, приятно слышать. Заглядывайте еще в гости.
Удалить