Вот этой статье как раз и пойдет речь о том, как с помощью CSS изменить внешний вид заголовков в Blogger-блоге.
Для начала определимся с селекторами.
Всего в шаблоне Blogger четыре типа заголовков и добавить собственный CSS можно к любому и каждому из них. Их селекторы уже записаны в коде шаблона следующим образом:
- .Header h1 - название блога. В данном случаи .Header - это селектор "шапки" блога, где и расположен заголовок первого уровня - h1.
- h2 - заголовки гаджетов(виджетов).
Чтобы избежать возможных противоречий между добавленным и существующим стилями, зайдите в Дизайнер шаблонов, затем Дополнительно и в настройках для Фон гаджета укажите Цвет рамки и Цвет скоса - прозрачный.
CSS добавленный к h2, также будет применен и к дате сообщений, но только в том случаи, если этому элементу не задан собственный стиль. Подробнее о изменение даты в сообщениях Blogger
Кроме этого, запись свойств к данному тегу изменит стиль заголовков у всех гаджетов в блоге, но при желании возможно задать названиям разных гаджетов различный CSS. Подробнее...
- h3.post-title - селектор названия постов(сообщений).CSS добавленный к h2, также будет применен и к дате сообщений, но только в том случаи, если этому элементу не задан собственный стиль. Подробнее о изменение даты в сообщениях Blogger
Кроме этого, запись свойств к данному тегу изменит стиль заголовков у всех гаджетов в блоге, но при желании возможно задать названиям разных гаджетов различный CSS. Подробнее...
- .comments h4 - заголовки в комментариях, это количество оставленных комментариев и надпись "Оставить комментарий" в случаи отсутствия оных.
Чтобы выровнять текст заголовка по-центру, в Blogger, как и везде используется свойство text-align со значением center.
Например для сообщений(постов) код будет таким:
Например для сообщений(постов) код будет таким:
h3.post-title {
text-align: center; /*выравнивание по центру*/
}
text-align: center; /*выравнивание по центру*/
}
Подучить и узнать некоторые CSS свойства вы можете на этой странице
Далее по теме
Здравствуйте! С удовольствием использую ваш ресурс в качестве "настольной книги" при ведении своего блога. Спасибо за доступные и подробные инструкции. Но кое-какой информации я не нашла - по поводу оформления названий гаджетов. Я воспользовалась кодом вашего старого оформления и изменила оформление заголовков постов (сюрпризы-жизни.рф).
ОтветитьУдалитьПомогите пожалуйста сделать точно такой же вид (но с меньшим шрифтом) у названий гаджетов! Все мои манипуляции с h2 изменяют все заголовки и не совсем так как надо :( Заранее спасибо!
Заголовки виджетов(гаджетов), помимо того что они заключаются в тег h2, еще имеют класс, запись их в шаблоне выглядит следующим образом <h2 class="title">***</h2>, т.е. также можно добавить CSS к ним и по классу: .title {....} или h2.title {....} - так будет правильнее.
УдалитьЧтобы уменьшить размер шрифта, измените значения для свойства font
Например если запись такая:
font: normal normal 15px serif; - то что выделено и есть размер шрифта, может быть как в пикселях , так и в %;
Если для стиля заголовков нет такого свойства, можете добавить отдельно, записав к нему:
font-size: 14px; - или любое нужное значение.
Спасибо за такой быстрый и подробный ответ! На первый взгляд вроде понятно что и как:) Побежала пробовать!
УдалитьСпасибо за инструкцию
ОтветитьУдалитьОчень понравилась Ваша форма для комментариев.
ОтветитьУдалить