Изменяем вид заголовков в Blogger(Blogspot)

Разноцветная эмблема BloggerПрименение стилевых свойств к названиям статей, различных гаджетов и виджетов, позволяет без труда оформить их в соответствии с общим дизайном блога. Таким образом к ним можно добавить красивый фон в виде изображения или CSS градиента, для оформления текста подключить и использовать интернет шрифт, а также выровнять текст по-центру или правому краю.
  Вот этой статье как раз и пойдет речь о том, как с помощью CSS изменить внешний вид заголовков в Blogger-блоге.
  Для начала определимся с селекторами.
  Всего в шаблоне Blogger четыре типа заголовков и добавить собственный CSS можно к любому и каждому из них. Их селекторы уже записаны в коде шаблона следующим образом:
- .Header h1 - название блога. В данном случаи .Header - это селектор "шапки" блога, где и расположен заголовок первого уровня - h1.
- h2 - заголовки гаджетов(виджетов).
Чтобы избежать возможных противоречий между добавленным и существующим стилями, зайдите в Дизайнер шаблонов, затем Дополнительно и в настройках для Фон гаджета укажите Цвет рамки и Цвет скоса - прозрачный.
  CSS добавленный к h2, также будет применен и к дате сообщений, но только в том случаи, если этому элементу не задан собственный стиль. Подробнее о изменение даты в сообщениях Blogger
  Кроме этого, запись свойств к данному тегу изменит стиль заголовков у всех гаджетов в блоге, но при желании возможно задать названиям разных гаджетов различный CSS. Подробнее...
- h3.post-title - селектор названия постов(сообщений).
- .comments h4 - заголовки в комментариях, это количество оставленных комментариев и надпись "Оставить комментарий" в случаи отсутствия оных.
Чтобы выровнять текст заголовка по-центру, в Blogger, как и везде используется свойство text-align со значением center.
Например для сообщений(постов) код будет таким:
h3.post-title {
 text-align: center; /*выравнивание по центру*/
}

  Подучить и узнать некоторые CSS свойства вы можете на этой странице
Далее по теме

5 комментариев:

  1. Здравствуйте! С удовольствием использую ваш ресурс в качестве "настольной книги" при ведении своего блога. Спасибо за доступные и подробные инструкции. Но кое-какой информации я не нашла - по поводу оформления названий гаджетов. Я воспользовалась кодом вашего старого оформления и изменила оформление заголовков постов (сюрпризы-жизни.рф).
    Помогите пожалуйста сделать точно такой же вид (но с меньшим шрифтом) у названий гаджетов! Все мои манипуляции с h2 изменяют все заголовки и не совсем так как надо :( Заранее спасибо!

    ОтветитьУдалить
    Ответы
    1. Заголовки виджетов(гаджетов), помимо того что они заключаются в тег h2, еще имеют класс, запись их в шаблоне выглядит следующим образом <h2 class="title">***</h2>, т.е. также можно добавить CSS к ним и по классу: .title {....} или h2.title {....} - так будет правильнее.
      Чтобы уменьшить размер шрифта, измените значения для свойства font
      Например если запись такая:
      font: normal normal 15px serif; - то что выделено и есть размер шрифта, может быть как в пикселях , так и в %;
      Если для стиля заголовков нет такого свойства, можете добавить отдельно, записав к нему:
      font-size: 14px; - или любое нужное значение.

      Удалить
    2. Спасибо за такой быстрый и подробный ответ! На первый взгляд вроде понятно что и как:) Побежала пробовать!

      Удалить
  2. Спасибо за инструкцию

    ОтветитьУдалить
  3. Очень понравилась Ваша форма для комментариев.

    ОтветитьУдалить

Следующее Предыдущее

BestProject