Стиль подзаголовков статьи в Blogger

Заголовки и подзаголовки статей играют важную роль. Они участвуют в поиске и визуально структурируют информацию в статье. 

Все заголовки ранжируются по степени важности: h1, h2 ... h6.

В HTML-коде сообщения подзаголовок уровня 3 выглядит так:

_______________________________________________________________

<h3>Текст_подзаголовка</h3>

_______________________________________________________________

где <h3></h3> - теги подзаголовка третьего уровня (h3).

Настройка заголовков статей на главной странице

На главной странице блога показываются сообщения списком от поздних к ранним. При нажатии на заголовок сообщения в этом списке пользователь переходит непосредственно на страницу статьи.
Чтобы задать стиль заголовков статей, отображаемых на главной странице воспользуемся дизайнером шаблонов в Панель управления - Шаблон - Настроить (при любой правке шаблона не забываем делать резервную копию).
Дизайнер шаблонов Blogger - Дополнительно - Заголовок сообщения:

Здесь можно задать шрифт, размер и цвет заголовков.

Настройка подзаголовков в статье Blogger

Задать подзаголовок нужного уровня позволяет кнопка Формат в панели инструментов:

Выделить текст подзаголовка и выбрать из списка нужный уровень. При этом в предложенном списке задаются следующие уровни заголовков (по списку сверху вниз):

• Заголовок - h2
• Подзаголовок - h3
• Подзаголовок - h4
• Обычный  - нет уровня (обычный текст).

Чтобы задать визуальные параметры заголовков необходимо изменить код шаблона.

В нашем случае будем задавать стиль подзаголовков h3. 

Вот так будет выглядеть наш конечный результат:

Сохраняем резервную копию шаблона. Изменить HTML. С помощью сочетания клавиш Ctrl+F ищем в шаблоне строку:

_______________________________________________________________

]]></b:skin>

_______________________________________________________________

Перед ней вставляем такой код:

_______________________________________________________________

.blog-posts h3 {

  color: #009999;

  font: 2.0em/1.2em Helvetica,Arial,Helvetica,sans-serif;

  margin-bottom: 18px; 

padding: 10px 0 3px;

}

_______________________________________________________________

где цветом выделены следующие параметры: цвет текста, размер шрифта, междустрочный интервал,  шрифт.

Вот еще несколько вариантов:

_______________________________________________________________

.blog-posts h3 {
  border-bottom: 3px dashed #660066;
  color: #990099;
  font: 2.0em/1.5em Helvetica,Arial,Helvetica,sans-serif;
  margin-bottom: 18px;
  padding: 10px 0 3px;
}
_________________________________________________________________________________

_________________________________________________________________________________
.blog-posts h3 {
  border-bottom: 3px double #003300;
  color: #336633;
  font: 2.0em/1.5em Helvetica,Arial,Gorgia,sans-serif;
  margin-bottom: 18px;
  padding: 10px 0 3px;
}
_________________________________________________________________________________

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

На этом пока все, удачи!