Хлебные крошки в Blogger

Хлебные крошки в Blogger

Как установить хлебные крошки (Breadcrumbs) в Blogger шаблон Contempo

Хлебные крошки (Breadcrumbs) помогают посетителям сайта легко ориентироваться в структуре блога и улучшить внутреннюю перелинковку. Кроме того, они положительно влияют на SEO, так как поисковые системы учитывают их в результатах выдачи. В этом руководстве вы узнаете, как установить стильные и адаптивные хлебные крошки в Blogger.

1. Откройте HTML-шаблон

  1. Перейдите в панель управления Blogger.
  2. Выберите ТемаИзменить HTML.
  3. Перед началом редактирования сделайте резервную копию шаблона.

2. Найдите нужное место в шаблоне

Используйте поиск (Ctrl+F) и найдите строку:

<b:includable id='post' var='post'>
Хлебные крошки

Сразу под этой строкой вставьте следующий код:


<!-- Breadcrumbs -->
<b:if cond='data:view.isPost or data:view.isPage'>
  <nav class='breadcrumbs' itemscope itemtype='https://schema.org/BreadcrumbList' aria-label="breadcrumb">
    <div class='container'>
      <span itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl' itemprop='item'>
          <span itemprop='name'><i class='fa fa-home'></i> Главная</span>
        </a>
        <meta itemprop='position' content='1'/>
      </span>

      <b:if cond='data:view.isPost'>
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
            <span class='breadcrumb-separator'> › </span>
            <span itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'>
              <a expr:href='data:post.labels.first.url' itemprop='item'>
                <span itemprop='name'><data:post.labels.first.name/></span>
              </a>
              <meta itemprop='position' content='2'/>
            </span>
          </b:if>
          <span class='breadcrumb-separator'> › </span>
          <span class='breadcrumb-current' itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'>
            <span itemprop='name'><data:post.title/></span>
            <meta itemprop='position' content='3'/>
          </span>
        </b:loop>
      </b:if>

      <b:if cond='data:view.isPage'>
        <span class='breadcrumb-separator'> › </span>
        <span class='breadcrumb-current' itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'>
          <span itemprop='name'><data:view.title.escaped/></span>
          <meta itemprop='position' content='2'/>
        </span>
      </b:if>
    </div>
  </nav>
</b:if>

<!-- CSS -->
<b:if cond='!data:view.isLayoutMode'>
<style>
.breadcrumbs {
  background: #fff;
  padding: 0 0 20px;
  font-size: 14px;
}
.breadcrumbs .container {
  max-width: 1200px;
  margin: 0 auto;
}
.breadcrumbs a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}
.breadcrumbs a:hover {
  color: #333;
  text-decoration: underline;
}
.breadcrumb-separator {
  color: #888;
  margin: 0 4px;
}
.breadcrumb-current {
  color: #222;
  font-weight: normal;
}
@media (max-width: 768px) {
  .breadcrumbs {
    padding: 10px 0;
    font-size: 13px;
  }
  .breadcrumbs .container {
    padding: 0 15px;
  }
}
.dark-mode .breadcrumbs {
  background: #2d3748;
}
.dark-mode .breadcrumbs a {
  color: #8cbff2;
}
.dark-mode .breadcrumbs a:hover {
  color: #c0ddff;
}
.dark-mode .breadcrumb-separator {
  color: #a0aec0;
}
.dark-mode .breadcrumb-current {
  color: #fff;
}
</style>
</b:if>

Сохраняем. Проверяем.

3. Настройка

Вы можете изменить:

  • "Главная" - замените на нужное название.
  • Цвета - поменяйте значения в CSS под дизайн вашего блога.
  • Разделитель - замените символ на /, >, | или другой.
  • Отступы - настройте padding и margin для нужного расположения.

Шаг 4. Проверка

После сохранения шаблона хлебные крошки будут отображаться так:

  • На страницах постов: Главная › Категория › Название поста
  • На обычных страницах: Главная › Название страницы

Хлебные крошки используют микроразметку Schema.org для лучшего SEO.

Теперь у вас на блоге есть стильные, адаптивные и SEO-дружественные хлебные крошки.

Комментарии