Оформление стилей даты в Blogger : Как добавить стили к заголовку даты Blogpost

Как изменить внешний вид заголовка даты

 По умолчанию в темах Blogger  дата публикации оформлена стандартно, но вы можете изменить её стиль, цвет и даже добавить красивую иконку.

Перед любыми изменениями обязательно сделайте резервную копию шаблона Blogger.
💡 Это позволит восстановить блог, если что-то пойдёт не так.

• Перейдите в «Тема» → «Настроить» → «Сохранить резервную копию».
• Скачайте копию текущего шаблона на свой компьютер.

Показать статью

Изменение внешнего вида заголовка даты в Blogger с помощью CSS стилей

💡 Совет: Вы можете изменить цвет фона, цвет самого текста, добавить фоновую картинку и т.п. на свой вкус.

• Добавление стилей к заголовку даты в Blogger

  Чтобы изменить внешний вид заголовка даты публикации в Blogger:

  1. Перейдите в «Тема» → «Настроить» → «Изменить HTML» в панели Blogger.
  2. Нажмите Ctrl + F ,чтобы открыть поиск.
  3. В поле Search введите (в зависимости от Темы шаблона):
     • h2.date-header
     • .date-header span
  4. И нажмите клавишу "Enter". При наличии такого кода в шаблоне HTML кода будет выполнен переход на него. 
  5. Первый найденный HTML скрипт в окне редактора выделится тёмно-жёлтым цветом. Удалите полностью эти стили.
  6. Сразу перед тегом </b:skin> вставьте свой CSS.

  Пример простого CSS для заголовка даты:

  .date-header {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    border-bottom: 2px solid #d53e07;
    padding-bottom: 4px;
    margin-bottom: 10px;
  }
  

  💡 Один из способов добавления иконки к заголовку даты: в HTML-шаблоне Темы найдите блок постов: <!-- posts --> <div class='blog-posts hfeed'>
  Затем найдите место, где выводится дата публикации (обычно это <h2 class='date-header'>...</h2>).
  После этого удалите его полностью и замените его следующим кодом:

  <h2 class='date-header'>
    <span>
      <i class="fa fa-clock" style="font-size:18px; color:red;"></i>*
      <data:post.dateHeader/>
      <data:post.times/>
    </span>
  </h2>

• Добавляем иконку Font Awesome к заголовку даты

  Чтобы сделать заголовок даты более выразительным, можно добавить иконку календаря.

  1. Подключение Font Awesome (вставить перед </head>):

  <link rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  

  
  
  2. Добавление иконки с помощью CSS (вставить перед </b:skin>):

  .date-header::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f073"; /* иконка календаря */
    margin-right: 6px;
    color: #ff6600;
  }
  

  🎯 Примечание: Иконка добавится автоматически перед датой публикации без изменения HTML-кода шаблона. Код \f073 — это календарь, его можно заменить на другой с сайта Font Awesome.