Хлебные крошки в Blogger
Как установить хлебные крошки (Breadcrumbs) в Blogger шаблон Contempo
Хлебные крошки (Breadcrumbs) помогают посетителям сайта легко ориентироваться в структуре блога и улучшить внутреннюю перелинковку. Кроме того, они положительно влияют на SEO, так как поисковые системы учитывают их в результатах выдачи. В этом руководстве вы узнаете, как установить стильные и адаптивные хлебные крошки в Blogger.
1. Откройте HTML-шаблон
- Перейдите в панель управления Blogger.
- Выберите Тема → Изменить HTML.
- Перед началом редактирования сделайте резервную копию шаблона.
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-дружественные хлебные крошки.
Комментарии
Отправить комментарий