Как выровнять текст и изменить форму заголовка в блогах Blogspot



Украшаем заголовок блога, выравнивание текста по центру, вправо, влево


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

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

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

Начнем с выравнивания текста

#header h1 {
text-align: center;
}
#header .description {
text-align: center;

}

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

#header h1 {
margin-left: 50px;
}
#header .description {
margin-left: 50px;
}

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

У кого возникнут проблемы с выравнивание текста заголовка, в шаблоне нажимаем на первую стрелку слева, находим такой кусок кода, обычно в самом начале.


/* Header
----------------------------------------------- */
Здесь может быть еще код

.Header h1 {
text-align:center ;

И сразу ниже .Header h1 { вставляем (text-align:center ;)-по центру или margin-left: 50px;-выравниваем правее.

Точно также можно выравнять изображения/картинки

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}



Здесь выравнивание по центру, настраиваем margin-left: auto; вместо auto пишем числа в px, и настраиваем расположение. Если в margin-right: auto; вместо auto вписать 0px, то изображение будет справа.


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

А теперь займемся оформлением формы заголовка.

Оформление заголовка фоновым цветом, используем такой стиль CSS


#header {
height:100px;
width: auto;
background: #f8f8ff;
border:2px groove #2db3e9;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
-goog-ms-border-radius: 45px;
margin-left: 170px;
margin-right: 170px;
padding-top:1px;
}
.header-outer {
border:2px dotted #ffffff;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-goog-ms-border-radius: 25px;
}
В первом коде выделенное синим настройте высоту, ширина устанавливается автоматически. Но Вы можете настроить отступы справа и слева-выделено оранжевым. Лиловым-цвет фона; фиолетовым-размер, цвет, радиус закругления углов и форма границы рамки. Коричневый цвет-для корректного отображения в разных браузерах.

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


Идем дальше: мы можем вместо фона вставить URL изображения, используя такой CSS стиль

#header {
height:100px;
width: auto;
background-image:url(http://img-fotki.yandex.ru/get/5404/iri35476104.ae/0_42d97_bcbf81b3_orig.jpg );
border:1px dotted #118899;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
-goog-ms-border-radius: 45px;
margin-left: 100px;
margin-right: 100px;
padding-top:1px;
}


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

Хочу предупредить, что не во всех шаблонах поддерживаются CSS или почти не во всех. У меня три тестовых блога, в двух без проблем настроила, а с третьим пришлось повозиться. Это как раз тот случай, когда текст выравнивается вставкой одной строки (text-align:center ;) после .Header h1 {, в шаблоне блога, о чем я писала выше.


Чтобы сделать разделительную линию между шапкой и остальной частью блога, можно вставить дизайн-добавить гаджет вот этот код

<div style="width:96%;background-color: #e54651; border-top: 3px dashed #0e5198; margin-top: 2em;"></div>
В настройках я думаю разберетесь, почитайте мой пост о разделительных линиях. Вы можете в гаджет вставить самую простую линию <hr>, можете настроить форму, в статье я подробно обо всем написала.

Есть еще один вариант, если у Вас установлено стороннее меню, то просто в конце кода меню вставляем код разделительной линии:

код меню
<br> отступ
<hr> простая линия
или другой код код разделительной линии

И последний вариант: идем в шаблон-изменить шаблон, делаем резервную копию. Раскрываем слева самую первую стрелку, находим код

/* Header
----------------------------------------------- */
.header-outer {
border-bottom:1px dashed #ccc;

Выделенное зеленым светлым-нижняя граница, её цвет, размер и форма.

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


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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *